频道栏目
首页 > 程序开发 > 移动开发 > 其他 > 正文
React Native页面间传值总结
2017-07-05 10:23:03      个评论    来源:风雨无阻,执着追求!!!  
收藏   我要投稿

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.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为例,仅展示基本使用。建议大家查看原文详细使用说明。

    // 存储
    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构建。

点击复制链接 与好友分享!回本站首页
上一篇:Unity项目如何使用Git进行版本控制
下一篇:ImageView的平铺效果
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站