提问者:小点点

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


当我试图启动我的反应原生应用程序时,我收到了这条消息。通常这种格式适用于其他多屏幕导航,但在这种情况下不起作用。

以下是错误:

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

共3个答案

匿名用户

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

匿名用户

创建一个新的文件容器。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; 

然后在你的pp.js文件中:

import Container from './ScreenContainer';

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