javascript - 错误 : A navigator can only contain 'Screen' components as its direct children

Question

我是 React Native 的新手，我收到了这个错误，但我无法解决它。
我正在关注主要 react-navigation page 中的教程，但我无法完成它。
我将不胜感激。谢谢!

import * as React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen() {
     return (
       <View style={{flex: 1, alignItems: 'center', 
         justifyContent: 'center'}}>
         <Text> Home Screen </Text>
      </View>
     );
   }

   const Stack = createStackNavigator();
   export default function App() {
     return (
       <NavigationContainer>
         <Stack.Navigator>
           <Stack.Screen name="Home" component={HomeScreen} />
         </Stack.Navigator>
       </NavigationContainer>
      );
    }

Screenshoot error

Answer 1

请在编写代码时检查您的代码，检查标签和空格，如果您使用 Visual Studio，请尽可能将标签放在同一行，使用格式化程序和自动完成标签，这将帮助您解决问题。
您的代码应如下所示:

import React from 'react';
import { Text, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
            <Text> Home Screen </Text>
        </View>
    );
}

const Stack = createStackNavigator();
export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}