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

时间: 2017-10-24阅读: 2485标签: 跨平台

在使用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, }]; }


如何将React Native 项目运行在 Web 浏览器上面

React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力。相比之前的 Web app 来说,对于性能和用户体验提升了非常多。但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问。于是 React web 就出现了

MobX在React Native 中的使用心得

MobX 是一款十分优秀的状态管理库,不但书写简洁还非常高效。当然这是我在使用之后才体会到的,当初试水上车的主要原因是响应式,考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处。

React-Native创建组件Component的三种方式

React-Native创建组件的三种方式:ES6创建组件的方式、ES5创建组件的方式、函数式。当创建的方式不同的时候,其实他们的导入方式也有几种。

React Native常用插件_整理React Native插件系列之插件汇总

感觉到React Native的写APP效率真的很高,在NPM上搜索了一些插件,发现React Native的生态圈现在真的很大。绝对可以满足现在很多APP的需求,而不止企业类的APP了。

Flutter框架_谷歌推出的跨平台打造ios和android高质量的原生UI框架

Fluter是由google一款移动UI框架,意在帮助开发者在 iOS 和 Android 两个平台开发高质量的原生应用,Flutter是免费和开源的,就像Android SDK一样,并且可以与现有代码一起使用。Flutter的主要吸引力在于iOS和Android的智能和快速移动开发。

详细介绍 Weex 的 JS Framework【转】

Weex 是一个既支持多个前端框架又能跨平台渲染的框架,JS Framework 介于前端框架和原生渲染引擎之间,处于承上启下的位置,也是跨框架跨平台的关键。无论你使用的是 Vue 还是 Rax,无论是渲染在 Android 还是 iOS,JS Framework 的代码都会运行到

来聊聊怎么写react-native上的样式吧【转】

在react-native上是怎么写样式的吧,和传统的web不一样的是,在react-native上面是没有css代码,不过得益于Yoga,我们可以在客户端上像写css一样的去书写我们的样式。

Weex 和 React Native的区别和比较

weex的思想是多个平台,只写一套代码,而react-native的思想是多个平台可以写多套代码,但其使用的是同一套语言框架。

都在封杀 React/React Native ,那我到底还该不该继续学呢?

如何看待百度要求内部全面停止使用 React / React Native?非常的火爆,以至于引发了前端的一片热议,整个圈子都在讨论这件事。