1. 创建项目并安装
react-native init ExampleApp
cd ExampleApp
react-native install --save react-navigation
2. 运行app
react-native run-android
react-native run-ios
3. 注册
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },});
AppRegistry.registerComponent('SimpleApp',() => SimpleApp);
4.组件定义
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
static navigationOptions 静态定义navigation可选项,定义标题。
5.@R_454_404@面
//获取navigate
const {navigate} = this.props.navigation;
navigate('Home')
6.传参数和获取navigate传过来的参数
- 传参数
//获取navigate
const {navigate} = this.props.navigation;
navigate('Home',{param:'param'})
- 接收参数
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.param}`,});
const {params} = this.props.navigation.state;
return(
<View>
<Text>Chat with {params.param}</Text>
</view>
)