当我试图启动我的反应原生应用程序时,我收到了这条消息。通常这种格式适用于其他多屏幕导航,但在这种情况下不起作用。
以下是错误:
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 />;
}
}
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 />
);
}
}