Invariant Violation: The navigation prop is missin

2019-08-05 13:29发布

问题:

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