React Navigation基础使用

前端之家收集整理的这篇文章主要介绍了React Navigation基础使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. 创建项目并安装

  1. react-native init ExampleApp
  2. cd ExampleApp
  3. react-native install --save react-navigation

2. 运行app

  1. react-native run-android
  2. react-native run-ios

3. 注册

  1. const SimpleApp = StackNavigator({
  2. Home: { screen: HomeScreen },});
  3.  
  4. AppRegistry.registerComponent('SimpleApp',() => SimpleApp);
@H_404_41@4.组件定义
  1. class ChatScreen extends React.Component {
  2. static navigationOptions = {
  3. title: 'Chat with Lucy',};
  4. render() {
  5. return (
  6. <View>
  7. <Text>Chat with Lucy</Text>
  8. </View>
  9. );
  10. }
  11. }

static navigationOptions 静态定义navigation可选项,定义标题

5.@R_422_404@面

  1. //获取navigate
  2. const {navigate} = this.props.navigation;
  3. navigate('Home')

6.传参数和获取navigate传过来的参数

  • 传参数
  1. //获取navigate
  2. const {navigate} = this.props.navigation;
  3. navigate('Home',{param'param'})
  • 接收参数
  1. static navigationOptions = ({ navigation }) => ({
  2. title: `Chat with ${navigation.state.params.param}`,});
  1. const {params} = this.props.navigation.state;
  2. return(
  3. <View>
  4. <Text>Chat with {params.param}</Text>
  5. </view>
  6. )

猜你在找的React相关文章