Reactjs 不变冲突：此导航器缺少导航道具

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

以下是错误：

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

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图}；
从“反应导航”导入{createStackNavigator}；
从“./view/Login.js”导入登录名
从“./view/SignUp.js”导入注册
const RootStack=createStackNavigator(
{
主页：{
屏幕：登录
},
报名：{
屏幕：注册
}
},
{
initialRouteName:“主页”
}
);
导出默认类App扩展React.Component{
render（）{
返回；
}
}

React Navigation 3.0有许多功能，包括根导航器所需的显式应用程序容器

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

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

另外请注意，如果您现在使用v4，则导航器已移动到单独的回购协议。您现在需要安装并从

'react-navigation-stack'

导入。例如，

import{createStackNavigator}来自“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;

---

@汤姆·迪克森（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 />

import React，{Component}来自'React'；
从“react navigation”导入{createStackNavigator，createAppContainer}；
从“./主页”导入主页；
从“/Details”导入详细信息；
const Root=createStackNavigator({
主页：{
屏幕：主页，
},
详情：{
屏幕：详细信息，
},
});
const container=createAppContainer（根）；
导出默认容器还有另一种方法

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
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
    }
  },
  {
    initialRouteName: 'Home'
  }

);

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

export default createAppContainer(RootStack);

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图}；
从“react navigation”导入{createStackNavigator，createAppContainer}；
从“./view/Login.js”导入登录名
从“./view/SignUp.js”导入注册
const RootStack=createStackNavigator(
{
主页：{
屏幕：登录
},
报名：{
屏幕：注册
}
},
{
initialRouteName:“主页”
}
);
类应用程序扩展了React.Component{
render（）{
返回；
}
}
导出默认createAppContainer（根堆栈）；
我把代码放在底部

export default class App extends React.Component {
  render() {
    return (
      <View >
        <SimpleApp style={{ width: Dimensions.get("window").width }} />
      </View>
    );
  }
}

此外，我还将createAppContainer库包含在顶部的react导航中。
创建一个新文件ScreenContainer.js（您可以选择名称）。
然后在ScreenContainer文件中添加：

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import MainScreen from './MainScreen'; 
import AboutScreen from './AboutScreen';

const NavigationStack = createStackNavigator({
    Main: { 
        screen: MainScreen,
    },
    About: { 
        screen: AboutScreen,
    },
});

const Container = createAppContainer(NavigationStack);

export default Container; 

然后在App.js文件中：

import Container from './ScreenContainer';

class App extends Component {
  render() {
    return (
      <Container />
    );
  }
}

从“/ScreenContainer”导入容器；
类应用程序扩展组件{
render（）{
返回(
);
}
}
这是一个用于创建具有两个选项卡的底部导航器：

import {createBottomTabNavigator, createAppContainer} from 'react-navigation';

export class Home extends Component{
   //...
}

export class Settings extends Component{
   //...
}     

const navig = createBottomTabNavigator({
  Home: Home,
  Settings: Settings
});

const App = createAppContainer(navig);

export default App;

简单，我做到了

const App = createAppContainer(AppNavigator);
export default App;

而不是

export default AppNavigator;

过去几天我一直在苦苦挣扎。如果您已经从package.json中删除了react navigation并使用npm进行安装，那么您可能也一直在努力解决这个问题。请检查您的备份项目并查看导航版本，尝试添加相同的导航版本，删除节点模块并进行npm安装。
希望它能奏效

祝你好运，用React Native:-）打破你的头脑。
在多次谷歌搜索之后，我浪费了2.5个小时才得到这个解决方案……希望这能奏效

只需导入这两个：

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";

并对您的代码进行如下小小更改：

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";

在类上方创建常量

最后在类中调用该常量，而不是



谢谢
 它说你缺少应用容器所以我必须把所有东西都放在堆栈导航器中的应用容器中？我感到困惑的是，这种设置在我以前的项目中没有任何错误。超级困惑@Turnipdabeets你能提供一个更全面的代码示例吗（我是新来React Native的）。谢谢你的帮助！：）@Turnipdabeets我使用了此解决方案，但我收到一个错误“
createStackNavigator（）
已移动到
react navigation stack
。有关更多详细信息，请参阅。“您能帮我一下吗。@kb920请看这对我也有用。所以基本上你必须把所有的东西都放在一个应用程序容器里。欢迎来到So。这看起来不是答案。Android的创始人！这是因为
createStackNavigator（）
已移动到
react导航堆栈
。有关更多详细信息，请参阅。
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";

const AppNavigator = createAppContainer(RootStack);

<AppNavigator />