React Native 页面间传值总结

各传值方式简述，总结如下:

• 1.正向：navigator.passProps 传递props
• 2.逆向：navigator.passProps 传递func（3种写法）
• 3.注册监听（DeviceEventEmitter）
• 4.全局变量global
• 5.持久化存储（AsynStorage/ react-native-storage）
• 6.Redux- 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.bReceivethis.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中的functionnewFuncForCallback(){    // do somthing ...}

在Page B中，传值：

onClickBPopToA(){    if(this.props.xxCallback){        // 可传多个内容        this.props.xxCallback(arg, ...);    }}

3.注册监听（DeviceEventEmitter）

// 1.在操作类中，导入DeviceEventEmitterimport {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: '',   // 用户名    ...}module.exports = Global;

使用Global.js:

// 在使用的地方，importimport 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中文文档

最后

让我们一起继续走上踏坑的路上...欢迎留言交流！！http://www.jianshu.com/p/cf302f508f66

blabla：Github