Invariant Violation: The navigation prop is missing for this navigator（不变量违规：该导航器缺少导航属性）

6 浏览
0 Comments

Invariant Violation: The navigation prop is missing for this navigator（不变量违规：该导航器缺少导航属性）

我在尝试启动我的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 ;
  }
}

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

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

然后引用它使用：

0
0 Comments

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;

0