在 React Native (0.5) 中更改视图

Question

我有 2 个视图，我想在不使用createStackNavigator的情况下从第一个移动到第二个视图

无需使用导航，因为第一个视图只是一个欢迎屏幕

import React from 'react';
import { View, Text, Button } from 'react-native';
class HomeScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Welcome!</Text>
<Button
title="sign In"
onPress={() => navigate('SignInScreen')}
/>
</View>
);
}
}
class SignInScreen extends React.Component {
render() {
return (
<View>
<Text>Sign In screen</Text>
</View>
);
}
}
export default HomeScreen

我得到的错误是

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

谢谢。

Answer 1

在状态上使用标志。 当您单击HomeScreen上的按钮时，它将标志更改为 true，这将允许条件语句调用要呈现的SignInScreen。

import React from 'react';
import { View, Text, Button } from 'react-native';
class HomeScreen extends React.Component {
state = {
loggedIn: false,
};
render() {
const { navigate } = this.props.navigation;
return this.loggedIn ? (
<SignInScreen />
) : (
<View>
<Text>Welcome!</Text>
<Button
title="sign In"
onPress={() => this.setState({ loggedIn: true })}
/>
</View>
);
}
}
class SignInScreen extends React.Component {
render() {
return (
<View>
<Text>Sign In screen</Text>
</View>
);
}
}
export default HomeScreen;