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 根据需求执行相关操作
        ......
      }
    }

    .

  • 相关阅读:
    docker指令汇总
    springboot(八) 嵌入式Servlet容器自动配置原理和容器启动原理
    RabbitMQ 消息确认机制
    RabbitMQ 最常用的三大模式
    RabbitMQ 核心概念
    RabbitMQ 之简单队列
    Spring 详解(三)------- SpringMVC拦截器使用
    slf4j 搭配 log4j2 处理日志
    Spring 详解(二)------- AOP关键概念以及两种实现方式
    Spring 详解(一)------- AOP前序
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9515758.html
Copyright © 2011-2022 走看看