React Nativeのナビゲーションで発生する「A navigator can only contain 'Screen' components as its direct children」エラーの原因と解決方法

問題：React Nativeのナビゲーション実装時に発生するエラーの対処法

React Nativeでアプリを開発していると、ナビゲーションの実装中に「A navigator can only contain 'Screen' components as its direct children」というエラーメッセージに遭遇することがあります。この記事では、このエラーが発生する原因と、具体的な解決方法について詳しく解説します。

エラーが発生するコード例

まず、このエラーが発生するコードを見てみましょう。以下はApp.jsのサンプルコードです。

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;

このコードをコンパイルすると、コマンドプロンプトに以下のようなエラーが表示されます。

また、スマートフォンの画面上では次のようにエラーが表示されます。

エラーの原因

「A navigator can only contain 'Screen' components as its direct children」エラーが発生する主な原因は、以下の2つです。

原因1：インデント（字下げ）の不備

1つ目の原因は、インデントの乱れです。各コンポーネントは適切にインデントされている必要があり、特に子要素は親コンポーネントの中で正しく字下げしなければなりません。ネスト構造が崩れていると、Navigatorが直接の子としてScreen以外の要素を認識してしまうことがあります。

原因2：コード末尾の余分なスペース

2つ目の原因は、各コンポーネントの末尾に残ってしまった余分な空白文字です。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;

まとめ

React Nativeのナビゲーションで「A navigator can only contain 'Screen' components as its direct children」エラーが発生した場合は、まず以下のポイントを確認しましょう。

• Stack.Navigator内の各コンポーネントのインデントが正しく整えられているか
• Screenコンポーネントの末尾に余分なスペースや空白文字が残っていないか

これらの点を修正することで、ほとんどの場合このエラーは解消できます。コードを外部からコピーする際は、貼り付け後にインデントや余分な空白をチェックする習慣をつけておくと、同様のトラブルを未然に防ぐことができます。