错误：导航器只能包含“屏幕”组件作为其直接子项

Question

我是 React Native 的新手，我收到了这个错误，但我无法解决它。

我正在关注主要react-navigation 页面中的教程，但我无法完成它。

我将不胜感激任何帮助。谢谢！

    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 >
    );
}

屏幕截图错误

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>
    );
}

Answer 2

创建新的导航器时，请尝试重建应用程序。这为我解决了问题

重置 Metro 缓存

npm start -- --reset-cache

在安卓上运行

npx react-native run-android

在 iOS 上运行

npx react-native run-ios

Answer 3

某些组件的末尾有一个额外的空格。将代码放入我的 IDE 中并使用 ESLint 对其进行格式化，这就是我得到的结果：

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>{' '} // <--- right here
    </View>
  )
}

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

你可以看到一些{' '}在那里。这些是不应该存在的额外空格。这就是您的错误所说的，' '在Stack.Screen. 删除这些空白区域应该可以解决您的问题。

顺便说一句，我强烈建议您使用 JS IDE（如果您没有使用任何）和 linter，例如ESLint. 缩进对于避免此类错误并使代码更清晰是非常重要的。

Answer 4

再次构建即可。npx react-native run-android

Answer 5

我遇到了类似的问题。原来我正在使用这样的小案例：<Stack.screen> 而不是<Stack.Screen>