Xử lý lỗi Navigation: "A navigator can only contain 'Screen' components" trong React Native

Lỗi "A navigator can only contain 'Screen' components as its direct children" xảy ra khi sử dụng @react-navigation/native (v5+). Nguyên nhân: **Con trực tiếp của <Stack.Navigator> (hoặc Tab, Drawer) phải là <Stack.Screen>**, không được là component khác, Fragment, hay text node lẻ.

Code gây lỗi (Thường gặp do indentation/khoảng trắng)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';

const Stack = createStackNavigator();

const HomePage = ({ navigation }) => (
   navigation.navigate('About', { name: 'About Page' })} />
);

const AboutPage = () => You have reached inside About Page!;

const MyStack = () => {
  return (
    
      
        
        
        {' '}  {/* <-- Text node lẻ (khoảng trắng) GÂY LỖI */}
      
    
  );
};

export default MyStack;

Nguyên nhân chi tiết

Code đã sửa (Đúng chuẩn)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';

const Stack = createStackNavigator();

const HomePage = ({ navigation }) => (
   navigation.navigate('About', { name: 'About Page' })}
  />
);

const AboutPage = () => You have reached inside About Page!;

const MyStack = () => {
  return (
    
      
        
        
        {/* Không có khoảng trắng, comment, hay element nào khác ở đây */}
      
    
  );
};

export default MyStack;

Cách render điều kiện Screen (Đúng)

Cách 1: Điều kiện trong component prop

Cách 2: Dùng options.enabled (React Navigation 6+)


Cách 3: Dynamic routes (Khuyên dùng cho phức tạp)
const MyStack = () => {
  const routes = isLoggedIn ? [
    { name: 'Home', component: HomeScreen },
    { name: 'Profile', component: ProfileScreen },
  ] : [
    { name: 'Login', component: LoginScreen },
  ];

  return (
    
      {routes.map(route => (
        
      ))}
    
  );
};

ESLint Rule phòng ngừa
Cài eslint-plugin-react-native và bật rule:
"react-native/no-raw-text": "error"
Sẽ báo lỗi ngay khi có text node lẻ trong JSX.

Tóm tắt

  
Con trực tiếp của Navigator = chỉ <Stack.Screen> / <Tab.Screen> / <Drawer.Screen>.
  
Không có khoảng trắng, comment, Fragment, View, Text... giữa chúng.
  
Render điều kiện: map mảng routes hoặc điều kiện ở prop component/options.enabled.