[英]react-native navigation between screens
我是react-native的初学者,我将在我的应用程序中实现react堆栈导航。 我试图使App.js呈现Home.js作为默认屏幕。 我希望将app.js用作主屏幕,并添加另一个“登录”屏幕,但我做不到。 我无法找出问题所在,我只是让开发服务器返回了响应错误代码:500。 这是App.js的代码。
import React from 'react';
import { StyleSheet, Text, View, Button, KeyboardAvoidingView } from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation'
import Home from './Screens/Home';
const AppNavigator = createStackNavigator({
Home: {screen: Home},
});
export default class App extends React.Component {
render() {
return (
<AppNavigator />
);
}
}
这是我的Home.js文件。
import React from 'react';
import { StyleSheet, Text, View, Button, KeyboardAvoidingView } from 'react-native';
import {StackNavigator, createStackNavigator, createAppContainer} from 'react-navigation'
export default class Home extends React.Component {
static navigationOptions = {
title: 'Home',
}
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>This is the Home HomeScreen</Text>
</View>
);
}
}
您忘记了创建应用容器,请看以下链接https://reactnavigation.org/docs/en/hello-react-navigation.html
import React from 'react';
import { StyleSheet, Text, View, Button, KeyboardAvoidingView } from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation'
import Home from './Screens/Home';
const AppNavigator = createStackNavigator({
Home: {screen: Home},
});
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return (
<AppContainer />
);
}
}
我认为,您已经错过了“ createAppContainer”。 请尝试如下代码。
const AppStackNavigator = createStackNavigator({
Welcome: {
screen: WelcomeScreen,
}
});
const AppNavigator = createAppContainer(AppStackNavigator);
然后在渲染中使用AppNavigator。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.