วิธีจัดการกับข้อผิดพลาดขณะทำงานกับการนำทางใน ReactNative

ปัญหา:วิธีจัดการกับข้อผิดพลาด “เนวิเกเตอร์สามารถมีได้เฉพาะ 'หน้าจอ' คอมโพเนนต์เป็นลูกโดยตรง” ขณะทำงานกับการนำทาง inReactNative

วิธีแก้ปัญหา

ขณะใช้งานแอป คุณอาจพบปัญหาดังที่กล่าวข้างต้น จะเข้าใจว่าทำไมข้อผิดพลาดดังกล่าวจึงเกิดขึ้นและสิ่งที่สามารถทำได้เพื่อหลีกเลี่ยงมัน

นี่คือรหัสที่ทำให้เรามีข้อผิดพลาด -

ตัวอย่าง

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 (
      <Button title="Click Here" onPress={() => navigation.navigate('About',
      { name: 'About Page' })}/>
   );
};
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
const MyStack = () => {
   return (
      <NavigationContainer>
         <Stack.Navigator>
            <Stack.Screen
               name="Home"
               component={HomePage}
               options={{ title: 'From home page : Navigation' }}
               />
            <Stack.Screen name="About" component={AboutPage} />
         </Stack.Navigator>
      </NavigationContainer>
   );
};
export default MyStack;

ข้อผิดพลาดที่แสดงมีดังต่อไปนี้ในพรอมต์คำสั่งของคุณขณะคอมไพล์ -

การแสดงข้อผิดพลาดบนหน้าจอโทรศัพท์ของคุณมีดังนี้ -

สาเหตุของข้อผิดพลาด − เนวิเกเตอร์สามารถมีได้เฉพาะคอมโพเนนต์ "หน้าจอ" เป็นลูกโดยตรงเท่านั้น

สาเหตุแรกสำหรับข้อผิดพลาดเกิดจากการเยื้องที่ไม่ถูกต้อง จำเป็นอย่างยิ่งที่แต่ละองค์ประกอบเยื้องอย่างถูกต้อง องค์ประกอบลูกถูกเยื้องอย่างถูกต้องภายในองค์ประกอบหลัก

กรณีที่สองเกิดจากช่องว่างที่ส่วนท้ายของแต่ละส่วนประกอบ ลบช่องว่างออกจากส่วนท้ายของหน้าจอและคอมไพล์อีกครั้ง มันจะทำงานได้ดี โปรดระวังเมื่อคัดลอกและวางโค้ดจากแหล่งอื่น คุณจะพบข้อผิดพลาดนี้ในกรณีส่วนใหญ่

ให้เราเยื้องโค้ดด้านบนและลบช่องว่างถ้ามี นี่คือโค้ดสุดท้ายที่มีเอาต์พุต

ตัวอย่าง

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 (
      <Button title="Click Here" onPress={() => navigation.navigate('About',
      { name: 'About Page' })}/>
   );
};
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
const MyStack = () => {
   return (
      <NavigationContainer>
         <Stack.Navigator>
            <Stack.Screen
               name="Home"
               component={HomePage}
               options={{ title: 'From home page : Navigation' }}
               />
            <Stack.Screen name="About" component={AboutPage} />
         </Stack.Navigator>
      </NavigationContainer>
   );
};
export default MyStack;