各传值方式简述,总结如下:
- 1.正向:navigator.passProps 传递props
- 2.逆向:navigator.passProps 传递func(3种写法)
- 3.注册监听(
DeviceEventEmitter
) - 4.全局变量
global
- 5.持久化存储(
AsynStorage
/react-native-storage
) - 6.
Redux
- state
接下来具体看看,各方式实现:
注意⚠️:
方式1、2说明如下,均基于navigator管理(eg:A push to B,And B pop to A)。
1.正向:navigator.passProps 传递props
在Page A 中,传值:
onClickAJumpToB(){
this.props.navigator.push({
title: 'PageB',component: ComponentName,0);">passProps: {
// 传递的props命名,看你心情(如下:bReceive)
// 传递的data类型,看你需求
bReceive: 'data - trans to B',0);">bReceive2: [object],...
}
}
);
}
在Page B中,取值:
this.props.bReceive
this.props.bReceive2
2.逆向:navigator.passProps 传递func
在Page A 中,取值:
// ⚠️注意:写法1。传递func,回调 - 要绑定 this,否则找不到()
xxCallback: function (arg,...) {
// 更改state,触发refresh,其中arg即为回传的值
this.setState({
key: arg,...
});
}.bind(this),// ⚠️注意:写法2。绑定this,
// 其中newFuncForCallback为A中,另一function,如下下下...
xxCallback: this.newFuncForCallback.bind(this),161);">// ⚠️注意:写法3。ES6,箭头函数,无需bind
xxCallback: (arg,...) => {
this.setState({
// 回调函数,写法2中的function
newFuncForCallback(){
// do somthing ...
}
在Page B中,传值:
onClickBPopToA(){
if(this.props.xxCallback){
// 可传多个内容
this.props.xxCallback(arg,...);
}
}
3.注册监听(DeviceEventEmitter)
// 1.在操作类中,导入DeviceEventEmitter
import {DeviceEventEmitter} from 'react-native'
// 2.注册监听
this.event = DeviceEventEmitter.addListener(eventType,(arg,...) => {
// do somthing ...
});
// 3.发出通知 DeviceEventEmitter.emit(emit: function(eventType,arg,...);
// 4.移除监听
componentWillUnMount(){
// 移除所有监听
DeviceEventEmitter.removeAllListeners();
// 移除单个监听
this.event.remove();
}
4.全局变量 global
// global为系统自带,使用时无需import任何内容
// 存值
global.username = 'your name';
// 取值
global.username
额外补充:自己实现全局变量
创建自己的全局变量管理 Global.js,文件内实现如下:
Global = {
userName: '',161);">// 用户名
...
}
module.exports = Global;
使用Global.js:
// 在使用的地方,import
import Global from 'Global.js相对当前js文件的路径'
// 存值
Global.username = // 取值
Global.username
5.持久化存储(AsynStorage/ react-native-storage)
@H_403_235@说明:React-native-storage是在AsynStorage基础上再次封装的,具体使用无太大差异,接下来Richy以react-native-storage为例,仅展示基本使用。建议大家查看原文详细使用说明。
原文链接:https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md
// 存储
global.storage.save({key:rawData:{k1:value,...}});
// 读取 global.storage.load(key:' '}) .then(ret => { }).catch(err => { })
err => { })
// 删除
global.storage.clearMap();
6.Redux - state
@H_403_235@Redux内容太多store、action、reducer,篇幅有限,这里Richy就不再赘述了。PS:真心感觉小项目不适合Redux构建。
有兴趣的童鞋可以仔细阅读以下:
Redux中文文档
最后
@H_403_235@让我们一起继续走上踏坑的路上...欢迎留言交流!!http://www.jianshu.com/p/cf302f508f66
blabla:Github