More than code
Welcome to the website

React Navigation 指南 3:屏幕切换参数传递

1. 参数传递

参数传递分为两个部分:
1. 通过将参数放入一个对象作为navigation.navigate函数的第二个参数传递给参数:this.props.navigation.navigate('RouteName', { /* params go here */ })
2. 在页面中获取参数:this.props.navigation.getParam(paramName, defaultValue)注意:和v1.x的方式不同!!!!但是v1.x中的方式也可以正常使用

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

可以通过this.props.navigation.state.params获取参数。在参数可能为null的情况下,使用navigation.getParam处理更简单。

如果想直接通过参数(例如。this.props.itemId)访问参数this.props.navigation.getParam,则可以使用社区开发的react-navigation-props-mapper安装包。

2. 总结

  • navigatepush都接受一个可选的第二个参数,将参数传递给即将跳转的路由。例如:this.props.navigation.navigate('RouteName', {paramName: 'value'})
  • 获取参数:this.props.navigation.getParam
  • getParam作为更好的替代方案,也可以使用this.props.navigation.state.params。如果没有指定参数为null
赞(1) 打赏
未经允许不得转载:李帅帅空间 » React Navigation 指南 3:屏幕切换参数传递

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏