• react-native-router-flux 页面跳转与传值


    1、正向跳转
    假设情景:从Home页跳转到Profile页面,Profile场景的key值为profile

    不带参数: Actions.profile
    带参数: Actions.profile({'key':value})
    接收参数: this.props.key
    

    例如:

    通过 TouchableOpacity 的 onPress 方法实现页面的跳转

    // 不带参数的最简写法
    onPress={Actions.proflis}
    // 带参数的最简写法,传递的参数必须是Object类型,每个参数建议使用键值对方式传递
    onPress={() => {Actions.proflie({'key':value})}}
    // 接收参数
    this.props.key
    

    2、反向跳转
    假设情景:从Profile页返回Home页面

    返回上一页面,不带参数: Actions.pop()
    返回上一页面,带参数: Actions.pop({refresh:({'key':value})})
    指定回退页面数: Actions.pop({popNum:2})
    指定回退页面数,带参数: Actions.pop({popNum:2, refresh:({'key':value})})
    返回指定页面: Actions.popTo('home')
    

    注释:

    refresh是框架自带函数,可用于刷新属性(props)
    // 用于刷新回退到的页面的属性
    Actions.pop({refresh:({'key':value})})
    // 用于刷新当前页面的属性对应回退页面刷新属性,即接受传递的参数
    Actions.refresh('params')
    

    接收参数:

    // 1. 必须在componentWillReceiveProps(nextProps)生命周期中接受传递的参数
    // 2. 该生命周期方法中的参数必须叫做nextProps
    // 3. 所有传递过来的参数都包含在nextProps参数中
    // 4. 以nextProps.PARAM_NAME的方式获取指定的参数
    componentWillReceiveProps(nextProps) {
      // 假设前一个页面传递过来一个名字叫做isRefresh的布尔型参数
      if(nextProps.isRefresh) {
        // TODO 根据需求执行相关操作
        ......
      }
    }

    .

  • 相关阅读:
    名字空间,L,E, G , B 作用域, 内置电池
    lambda表达式
    表达式与声明的区别。
    jupyter book的使用
    centos7一键安装cacti_1.2.16版本
    docker修改阿里云镜像加速器
    centos单网卡多ip,被动模式
    centos同步时间
    centos7.x制作bond
    centos 6.X制作bond
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9515758.html
Copyright © 2020-2023  润新知