ReactNative React-native-router-flux框架---页面跳转与传值
来源:互联网 发布:日本经济泡沫 知乎 编辑:程序博客网 时间:2024/06/13 22:20
页面跳转与传值
一、内容简介
实现以下功能:
1. 正向跳转
2. 正向跳转并传值
3. 反向跳转
4. 反向跳转并传值
5. 指定页面跳转
6. 指定页面跳转并传值
二、代码实现
1、正向跳转
假设情景:从Home页跳转到Profile页面,Profile场景的key值为profile
- 不带参数
Actions.profile
- 带参数
Actions.profile({'key':value})
接收参数: this.props.KEY_NAME
eg:
通过TouchableOpacity的onPress方法实现页面的跳转
onPress={Actions.proflis} // 不带参数的最简写法
onPress={() => {Actions.proflie({'key':value})}} // 带参数的最简写法,传递的参数必须是Object类型,每个参数建议使用键值对方式传递
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 根据需求执行相关操作 ...... }}
0 0
- ReactNative React-native-router-flux框架---页面跳转与传值
- ReactNative React-native-router-flux框架---刷新当前页面的属性
- react-native-router-flux(一)
- React-native页面跳转传值实现
- React Native:页面跳转传值
- react-router跳转传值
- react-router跳转传值
- react-native-router-flux 使用详解(一)
- [React]react-router跳转传值
- react-native 页面跳转与数据操作
- React-Router传参取值页面跳转
- react-native 页面跳转
- (React-Native 学习之六) react-native-router-flux 组件学习
- ReactJS与antdDesign中页面跳转问题(React Router)
- react +webpack+express router实现登录与页面跳转
- react-native使用flux
- React Native + Flux
- react-router 4.2.0<link>页面跳转-传参与不传参
- 使用opencv的SVM和神经网络实现车牌识别
- csu1803——2016(数学)
- Go语言学习之encoding/xml(The way to go)
- 软件开发标准(文档模板)
- @Autowired注入原则
- ReactNative React-native-router-flux框架---页面跳转与传值
- Android异常之Service启动Activity
- python多线程
- 转专业进搜狐经验分享
- MYSQL explain详解
- hibernate异常 entity class not found: /shop/src//user/vo/User.java的解决方法
- 关于Thinkphp3.2 命名空间的说明-php5.3命名空间介绍-TP自动加载
- Redis Hashes类型介绍
- swift项目里面导入三方框架