ReactNativeでナビゲーションを操作しているときにエラーを処理するにはどうすればよいですか？

問題：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;

コンパイル中のコマンドプロンプトに表示されるエラーは次のとおりです-

電話画面でのエラーの表示は次のとおりです-

エラーの理由 −ナビゲーターには、直接の子として「画面」コンポーネントのみを含めることができます

エラーの最初の原因は、インデントが悪いためです。各コンポーネントが適切にインデントされていることが非常に必要です。子要素は、親コンポーネント内で適切にインデントされます。

2番目のケースは、各コンポーネントの最後にスペースが残っているためです。画面の最後からスペースを削除して、再度コンパイルします。それはうまくいくでしょう。別のソースからコードをコピーして貼り付ける場合は注意してください。ほとんどの場合、このエラーが発生します。

上記のコードをインデントし、スペースがある場合は削除してみましょう。これが出力付きの最終的なコードです。

例

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;