不变违规:此导航器缺少导航道具 [英] Invariant Violation: The navigation prop is missing for this navigator

问题描述

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

I am receiving this message when I tried starting my react native app. Usually this kind of format works on other multi screen navigation yet somehow does not work in this case.

这里是错误:

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 />;
  }
}

推荐答案

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

React Navigation 3.0 has a number of breaking changes including an explicit app container required for the root navigator.

过去，任何导航器都可以作为应用顶层的导航容器，因为它们都被包裹在导航容器"中.导航容器(现在称为应用容器)是一个高阶组件，用于维护应用的导航状态并处理与外部世界的交互以将链接事件转换为导航操作等.

In the past, any navigator could act as the navigation container at the top-level of your app because they were all wrapped in "navigation containers". The navigation container, now known as an app container, is a higher-order-component that maintains the navigation state of your app and handles interacting with the outside world to turn linking events into navigation actions and so on.

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

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.

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

Also please note that if you are now using v4, navigators have been moved to a separate repo. You'll now need to install and import from 'react-navigation-stack'. For example import { createStackNavigator } from 'react-navigation-stack' The solution below is for 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;

这篇关于不变违规:此导航器缺少导航道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！