RN混合开发,React Native与原生android和ios的交互通信

时间: 2017-10-24阅读: 2768标签: native

在使用react-native混合开发,经常会遇到一种场景:当原生页面的数据更新,返回RN的页面,一下相关数据并未刷新。这里就需要一个转发机制,然后原生应用通过事件的形式通知react-native更新数据,最新版的react-native文档中并未说明,下面讲解一下如何实现:

Android通讯

React-Native代码 : 

import { DeviceEventEmitter , Platform } from 'react-native';

componentWillMount(){//页面被渲染之前执行 if(Platform.OS=='android'){ DeviceEventEmitter.addListener('EventRefresh', (obj)=>{//android监听事件EventRefresh, this._getData(); }); } }

Android代码:

WritableMap params = Arguments.createMap();  
params.putString("message",msg.obj.toString());  
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit('EventRefresh', params);//名称,数据
IOS通讯

React-Native代码 : 

import { NativeEventEmitter , Platform } from 'react-native';
componentDidMount(){//组件加载完毕执行
        try{
            if(Platform.OS=='ios'){
                const navigationEmitter = new NativeEventEmitter(Global.kmrn.service);
                this._refresh=navigationEmitter.addListener('EventRefresh', (obj) => {//ios监听事件刷新数据
                    this._getData();
                });
            }
        }catch(e){
            console.log("KMRNService错误:"+e);
        }    
    }

IOS代码:  

//自定义的模块类头文件要继承自RCTEventEmitter

#import "RCTEventEmitter.h" @interface ChivoxISE : RCTEventEmitter<RCTBridgeModule> //然后要导出你所有的方法名字 - (NSArray<NSString *> *)supportedEvents { return @[@"EventRefresh", @"other"]; } //分别实现你导出的所有方法,里面都使用sendEventWithName 方法即可 -(void)iseCallback:(NSString*)code result:(NSString*) result { [self sendEventWithName:@"EventRefresh" body:@{ @"code": code, @"result": result, }]; }