Question

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

Answer 1

React Navigation 3.0具有多个breaking changes，其中包括根导航器所需的显式应用程序容器。

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

在v2和更低版本中，React Navigation中的容器是   由create * Navigator功能自动提供。从v3开始，   您需要直接使用容器。在v3中，我们还重命名了   createNavigationContainer创建createAppContainer。

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;

Answer 2

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

Answer 3

这是另一种方式

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

Answer 4

在许多Google搜索之后，我浪费了2.5个小时来获得此解决方案...希望这可以工作。

只需导入这两个：

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

，然后对您的代码进行如下更改：

在类上方创建const

const AppNavigator = createAppContainer(RootStack);

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

<AppNavigator />

谢谢！

Answer 5

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>引用它

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

Answer 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 库。

Answer 8

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

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;

Answer 9

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

我做到了

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

代替

export default AppNavigator;

Answer 10

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

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

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

10 个答案: