前言：
正式入戏前，先提供Richy当前环境：<code>react-native</code>: 0.41.2，<code>nmp</code>:4.1.2，<code>react</code>:15.4.2。另欢迎留言讨论...
各传值方式简述，总结如下:
- 1.正向：navigator.passProps 传递props
- 2.逆向：navigator.passProps 传递func（3种写法）
- 3.注册监听（<code>DeviceEventEmitter</code>）
- 4.全局变量<code>global</code>
- 5.持久化存储（<code>AsynStorage</code>/ <code>react-native-storage</code>）
- 6.<code>Redux</code>- state
接下来具体看看，各方式实现：
communication.jpeg
注意⚠️：
方式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,
passProps: {
// 传递的props命名，看你心情（如下：bReceive）
// 传递的data类型，看你需求
bReceive: 'data - trans to B',
bReceive2: [object],
...
}
}
);
}
在Page B中，取值：
this.props.bReceive
this.props.bReceive2
2.逆向：navigator.passProps 传递func
在Page A 中，取值:
onClickAJumpToB(){
this.props.navigator.push({
title: 'PageB',
component: ComponentName,
passProps: {
// ⚠️注意：写法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),
// ⚠️注意：写法3。ES6，箭头函数，无需bind
xxCallback: (arg, ...) => {
// 更改state，触发refresh, 其中arg即为回传的值
this.setState({
key: arg,
...
});
},
...
}
}
);
}
// 回调函数，写法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
<b>额外补充：自己实现全局变量</b></br>
创建自己的全局变量管理 Global.js，文件内实现如下：
Global = {
userName: '', // 用户名
...
}
module.exports = Global;
使用Global.js:
// 在使用的地方，import
import Global from 'Global.js相对当前js文件的路径'
// 存值
Global.username = 'your name';
// 取值
Global.username
5.持久化存储（AsynStorage/ react-native-storage）
说明：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 => {
})
// 删除
global.storage.clearMap();
6.Redux - state
Redux内容太多store、action、reducer，篇幅有限，这里Richy就不再赘述了。PS：真心感觉小项目不适合Redux构建。
有兴趣的童鞋可以仔细阅读以下：
Redux中文文档
最后
让我们一起继续走上踏坑的路上...欢迎留言交流！！
blabla：Github
hello.jpg
