จัดการข้อผิดพลาด Navigation ใน React Native

ปัญหา: ข้อผิดพลาด "A navigator can only contain 'Screen' components as its direct children" ขณะทำงานกับ Navigation

วิธีแก้ไข

เข้าใจว่าทำไม error ถึงเกิด และวิธีป้องกัน

โค้ดที่ทำให้เกิด Error

App.js

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 }) => {
  return (
     navigation.navigate('About', { name: 'About Page' })} />
  );
};

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

const MyStack = () => {
  return (
    
      
        
        
      
    
  );
};

export default MyStack;

ข้อผิดพลาดที่แสดง

สาเหตุของ Error

A navigator can only contain 'Screen' components as its direct children

1. Indentation ไม่ถูกต้อง - ต้องเยื้องคอมโพเนนต์ลูกให้ถูกต้องในคอมโพเนนต์ผู้ปกครอง
2. เว้นวรรคค้างท้ายคอมโพเนนต์ - ลบ spaces ท้ายบรรทัดแล้วคอมไพล์ใหม่ จะทำงานได้ ระวัง copy-paste จากแหล่งอื่น

โค้ดที่แก้ไขแล้ว (Indentation ถูกต้อง)

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 }) => {
  return (
     navigation.navigate('About', { name: 'About Page' })}
    />
  );
};

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

const MyStack = () => {
  return (
    
      
        
        
      
    
  );
};

export default MyStack;

ข้อสังเกตเพิ่มเติม

• React Navigation v6+ ต้องการให้ <Stack.Screen> เป็น direct children ของ <Stack.Navigator> เท่านั้น
• ไม่ควร wrap <Stack.Screen> ด้วยคอมโพเนนต์อื่น (เช่น <View>, <Fragment>)
• ใช้ Prettier/ESLint เพื่อจัดรูปแบบโค้ดอัตโนมัติ