ReactNative에서 Navigation으로 작업하는 동안 오류를 처리하는 방법은 무엇입니까?

문제:Navigation inReactNative로 작업하는 동안 "내비게이터는 'Screen' 구성 요소만 직계 자식으로 포함할 수 있습니다" 오류를 처리하는 방법은 무엇입니까?

해결책

앱에서 작업하는 동안 위에서 설명한 것과 같은 문제가 발생할 수 있습니다. 이러한 오류가 발생하는 이유와 이를 방지하기 위해 수행할 수 있는 작업을 이해합니다.

다음은 우리에게 오류를 제공하는 코드입니다 -

예시

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;

표시되는 오류는 컴파일하는 동안 명령 프롬프트에 다음과 같습니다. -

전화기 화면의 오류 표시는 다음과 같습니다 -

오류 이유 − 내비게이터는 'Screen' 구성 요소만 직계 자식으로 포함할 수 있습니다.

오류의 첫 번째 원인은 잘못된 들여쓰기 때문입니다. 각 구성 요소를 적절하게 들여쓰기하는 것이 매우 필요합니다. 자식 요소는 부모 구성 요소 내에서 제대로 들여쓰기됩니다.

두 번째 경우는 각 구성 요소의 끝에 공백이 남아 있기 때문입니다. 화면 끝에서 공백을 제거하고 다시 컴파일하십시오. 그것은 잘 작동합니다. 다른 소스의 코드를 복사하여 붙여넣을 때 주의하시기 바랍니다. 대부분의 경우 이 오류가 발생합니다.

이제 위의 코드를 들여쓰고 공백이 있으면 제거해 보겠습니다. 다음은 출력이 포함된 최종 코드입니다.

예시

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;