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

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

我遇到了类似的问题。结果我用的是这样的小写：

<Stack.screen>

而不是

<Stack.Screen>

Answer 2

如果您使用 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 3

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

重置地铁缓存

npm start -- --reset-cache

在安卓上运行

npx react-native run-android

在 iOS 上运行

npx react-native run-ios

Answer 4

某些组件的末尾有一个额外的空格。将您的代码放入我的 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 5

再次构建。

npx react-native run-android

Answer 6

导入“react-native-gesture-handler”；

在顶部添加

import 'react-native-gesture-handler';

（确保它在顶部并且有 前面没有其他内容）的入口文件，例如 App.js 或 App.jsx 或 App.ts 或 App.tsx。我更喜欢App内置索引

如果不添加索引也

享受

Answer 7

验证您是否已将其添加到您的

MainActivity

课程中：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

将其导入到您的

MainActivity

类的顶部：

import android.os.Bundle;

此外，每次在react-native中安装新包时，请务必重建项目。

杀死（删除）所有正在运行的终端，然后，

启动应用程序：

npx react-native start

运行安卓：

npx react-native run-android

Answer 8

对我来说，错误是因为我在堆栈导航器中使用了注释，通过删除注释，错误得到了解决。

来自：

<Stack.Navigator>
  <Stack.Screen name="User" component={User} />    {/* Some Comment */}
</Stack.Navigator>

致：

<Stack.Navigator>
   <Stack.Screen name="User" component={User} />   
</Stack.Navigator>

Answer 9

没有解决办法吗？安装最新的 react-native-screens 包。 （当前版本为2021年11月3.9.0）

npm i react-native-screens

ios

cd ios && rm -rf Pods && pod install && cd ..

我建议使用缓存清理选项重新启动

npm start -- --reset-cache

Answer 10

对于那些使用 expo 的人，您可以运行来清除缓存，这就是它对我不起作用的原因

expo start -c

Answer 11

遇到类似的问题，我只需重新启动expo服务器即可。

Answer 12

**我也遇到同样的错误**

但是在我再次构建它之后这对我有用，所以尝试再次构建它它会解决我认为至少对我有用