React Native 页面间传值总结

前言：
正式入戏前，先提供Richy当前环境：react-native: 0.41.2，nmp:4.1.2，react:15.4.2。另欢迎留言讨论...

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

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.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

额外补充：自己实现全局变量

创建自己的全局变量管理 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