Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3

问题

I am new to react native and I am trying to create an app with stack navigation. This is what I have on my 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

This is also the error I am getting

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

I am obviously doing something wrong, please assist

回答1:

On the official documentation of React Navigation

Note: In v2 and earlier, the containers in React Navigation are automatically provided by the create*Navigator functions. As of v3, you are required to use the container directly. In v3 we also renamed createNavigationContainer to createAppContainer.

That means, now you have to explicitly use the Container, which you have done in your code.

But you're still using (exporting) navigator not the App.

So, change your last line as

export default App

回答2:

Follow the following steps :

Check your react-navigation version in package.json weather if its the latest or the same one when you created the project initially .
If you have deleted the older one and used npm command then its have installed react-native version latest one might be it not able to find the file in library.
Finally delete the node-modules and check your older project and it's react-navigation version and make it same in the current project inside package.json
Run npm install command

Run the project now .

来源：https://stackoverflow.com/questions/53379913/invariant-violation-the-navigation-prop-is-missing-for-this-navigator-in-react

标签

reactjs

react-native

react-navigation