不变违规:此导航器缺少导航props。在react导航 3

IT技术 reactjs react-native react-navigation
2021-05-02 06:49:22

我是本机react的新手,我正在尝试创建一个带有堆栈导航的应用程序。这就是我的 App.js 上的内容

import React from "react";
import { View, Text } from "react-native";
// Import React Navigation
import { createStackNavigator, createAppContainer } from 'react-navigation'

// Import the screens
import Main from './components/Main';
import Chat from './components/Chat';



// Create the navigator
const navigator = createStackNavigator({
  Main: { screen: Main },
  Chat: { screen: Chat },
});
const App = createAppContainer(navigator)


export default navigator

这也是我得到的错误

Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html

This error is located at:
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at registerRootComponent.js:17)
    in RootErrorBoundary (at registerRootComponent.js:16)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)
- node_modules/@react-navigation/core/src/navigators/createNavigator.js:19:8 in getDerivedStateFromProps
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7663:46 in applyDerivedStateFromProps
- ... 20 more stack frames from framework internals

我显然做错了什么,请帮助

2个回答

官方文档阵营导航

注意:在 v2 及更早版本中,React Navigation 中的容器由 create*Navigator 函数自动提供。从 v3 开始,您需要直接使用容器。在 v3 中,我们还将 createNavigationContainer 重命名为 createAppContainer。

这意味着,现在您必须明确使用您在代码中完成的 Container。

但是您仍在使用(导出)navigator而不是App.

因此,将最后一行更改为

export default App

请按照以下步骤操作:

  1. 在 package.json weather 中检查您的 react-navigation 版本是最新的还是与您最初创建项目时相同的版本。
  2. 如果您删除了旧版本并使用 npm 命令,那么它已经安装了最新版本的 react-native 版本,可能无法在库中找到该文件。
  3. 最后删除节点module并检查您的旧项目及其react导航版本,并在 package.json 中的当前项目中使其相同
  4. 运行 npm install 命令

立即运行项目。