zoukankan      html  css  js  c++  java
  • 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 根据需求执行相关操作
        ......
      }
    }

    .

  • 相关阅读:
    Linux添加硬盘并分区格式化
    Struts2/XWork 安全漏洞及解决办法
    Java中ArrayList和 LinkedList区别
    java位操作
    Spring Cloud Config 分布式配置中心【Finchley 版】
    实现win2003下mysql数据库每天自动备份
    模仿IE自动完成功能,非常完美(转)
    高级自定义查询、分页、多表联合存储过程(转)
    文本框位置
    英文论坛常用
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9515758.html
Copyright © 2011-2022 走看看