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

Posted 2023-02-22

【中文标题】不变违规：此导航器缺少导航道具

【英文标题】：Invariant Violation: The navigation prop is missing for this navigator

【发布时间】：2019-04-21 08:58:22

【问题描述】：

当我尝试启动我的 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 />;
  

【问题讨论】：

它说你缺少应用容器

所以基本上我必须将 Stack Navigator 中的所有内容都放在 App Container 中？我感到困惑的是，这种设置在我以前的项目中没有任何错误。

【参考方案1】：

经过多次谷歌搜索后，我浪费了 2.5 小时来获得这个解决方案......希望这会奏效。

只需导入这两个：

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

并像这样对您的代码进行一些更改：

在类之上创建常量

const AppNavigator = createAppContainer(RootStack);

最后在类中调用该 const 而不是 <RootStack/>

<AppNavigator />

谢谢！

【讨论】：

这是因为createStackNavigator() 已移至react-navigation-stack。有关详细信息，请参阅reactnavigation.org/docs/stack-navigator.html。

【参考方案2】：

React Navigation 3.0 有许多 breaking changes，包括根导航器所需的显式应用容器。

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

在 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 你能提供一个更全面的代码示例吗（我是 React Native 的新手）。

@Turnipdabeets 我使用了这个解决方案，但我收到一个错误“createStackNavigator() 已移至react-navigation-stack。有关更多详细信息，请参阅reactnavigation.org/docs/4.x/stack-navigator.html。”你能帮帮我吗？

@kb920 见***.com/questions/57817573/…

这也适用于我。所以基本上你必须把所有东西都放在一个 App Container 里。

我怎样才能把这个包装在商店里呢？

【参考方案3】：

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

祝你好运，用 React-Native 打破你的头 :-)

【讨论】：

欢迎来到 SO。这看起来不像是一个答案。

安卓创始人！

【参考方案4】：

const AppNavigator = createStackNavigator(
  Home:  screen: Home ,
  Friends:  screen: Friends ,
);

我做的很简单

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

代替

export default AppNavigator;

【参考方案5】：

这个是创建一个有两个标签的底部导航器：

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;

【参考方案6】：

新建一个文件 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 />
    );
  

【参考方案7】：

我在底部有代码

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

我只是将它替换为它，它就像一个魅力。肯定是因为 react-navigation 库的更新：

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

另外，我也将 createAppContainer 库包含在顶部的 react-navigation 中。

【参考方案8】：

这是另一种方式

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);

【参考方案9】：

import React,  Component  from 'react';
import  createStackNavigator, createAppContainer  from 'react-navigation';
import Home from './home';
import Details from './details';

const Root = createStackNavigator(

    home:  

        screen: Home,
    ,

    details:  

        screen: Details,
    ,

);

const container = createAppContainer(Root);
export default container;   

在您的 App.js 文件中使用 </container> 引用它

【参考方案10】：

@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 />