不变违规：此导航器缺少导航道具

Question

当我尝试启动我的 react native 应用程序时收到此消息。通常这种格式适用于其他多屏幕导航，但在这种情况下不知何故不起作用。

这是错误：

 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

这是我的应用程序格式：

 import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator(
  {
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  },
  {
    initialRouteName: 'Home'
  }

);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

原文由 Glenn Parale 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React Navigation 3.0 有许多 重大更改，包括根导航器所需的显式应用程序容器。

过去，任何导航器都可以充当应用程序顶层的导航容器，因为它们都被包装在“导航容器”中。导航容器，现在称为应用容器，是一个高阶组件，它维护应用的导航状态并处理与外部世界的交互以将链接事件转化为导航操作等。

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

另请注意，如果您现在使用的是 v4，则导航器已移至单独的存储库。您现在需要从 'react-navigation-stack' 安装和导入。例如 import { createStackNavigator } from 'react-navigation-stack' 以下解决方案适用于 v3。

 import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
const MainNavigator = createStackNavigator({...});
const App = createAppContainer(MainNavigator);

更全面的代码示例：

 import {
      createStackNavigator,
      createAppContainer
    } from 'react-navigation';
import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator({
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  });

const App = createAppContainer(RootStack);

export default App;

原文由 Turnipdabeets 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

@Tom Dickson 是这样的：

 import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';

const NavStack = createStackNavigator({
    ScreenOne: {
        screen: ScreenOne,
    },
    ScreenTwo: {
        screen: ScreenTwo,
    },
});

const App = createAppContainer(NavStack);

export default App;

然后引用它

<App />

原文由 Damien Mason 发布，翻译遵循 CC BY-SA 4.0 许可协议