React Native 页面间传值总结

前端之家收集整理的这篇文章主要介绍了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,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

猜你在找的React相关文章