设计图片网站哪个好,五金东莞网站建设技术支持,安卓 网站整站下载,分类信息免费发布网文章目录 一 、前言二、RN与安卓通信2.1 RN 调用安卓原生组件2.2 RN 应用消息机制方式与安卓原生代码切换2.3 RN 应用 Promise 机制与安卓原生代码通信2.4 RN 应用 callback 回调方式与安卓原生代码通信 三、RN与IOS通信3.1 定义导出的方法名3.2 promise 实现回调函数3.3 继承 … 文章目录 一 、前言二、RN与安卓通信2.1 RN 调用安卓原生组件2.2 RN 应用消息机制方式与安卓原生代码切换2.3 RN 应用 Promise 机制与安卓原生代码通信2.4 RN 应用 callback 回调方式与安卓原生代码通信 三、RN与IOS通信3.1 定义导出的方法名3.2 promise 实现回调函数3.3 继承 RCTEventEmitter 类 四、拓展阅读 一 、前言 RN项目开发阶段需要实现RN与原生应用间进行数据通讯。 二、RN与安卓通信 2.1 RN 调用安卓原生组件 用Android Studio打开一个已经创建好的RN项目选择android/build.gradle文件。创建一个类MyNativeModule继承ReactContextBaseJavaModule暴露出一些让RN调用的方法封装成一个原生模块。 public class MyNativeModule extends ReactContextBaseJavaModule{ }实现getName方法用于返回RN代码需要寻找的类的名称。 //RN代码要通过名字来调用该类的方法 Override public String getName() {return ToastModule; }实现类的构造方法将传入的上下文赋值给类内部私有的上下文。 // 创建一个上下文放到构造函数中得到reactContext private ReactApplicationContext mContext; public MyNativeModule(ReactApplicationContext reactContext){super(reactContext);mContext reactContext; }创建暴露给RN调用的方法需要用注释符号ReactMethod修饰。 //方法不能返回值。因为被调用的原生代码是异步的。原生代码执行结束之后只能通过回调函数或者发送消息给RN。 ReactMethod public void rnCallNative(String msg){//这个方法是说弹出一个弹窗到界面Toast.makeText(mContext,msg,Toast.LENGTH_LONG).show(); }在原生代码中创建一个类实现接口ReactPackage包管理器并且把第二步已经创建好的类加入到原生模块列表里。 public class MyReactPackage implements ReactPackage {Overridepublic ListNativeModule createNativeModules(ReactApplicationContext reactContext) {ListNativeModule modules new ArrayList();modules.add(new MyNativeModule(reactContext));return modules;}Overridepublic ListViewManager createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();} }将创建好的包管理器添加到ReactPackage列表里,也就是MainApplication代码中在类里找到方法getPackages方法将包管理器添加进去。 Override protected ListReactPackage getPackages() {return Arrays.ReactPackageasList(new MainReactPackage(),new MyReactPackage()); }在RN代码中用NativeModules组件去调用原生模块。 导入组件 import {AppRegistry,StyleSheet,Text,View,NativeModules, } from react-native;设置方法调用原生代码 call_button(){NativeModules.ToastModule.rnCallNative(RN与安卓开发); }布置UI 在render方法里面设置当用户点击文字时调用自定义的方法call_button。并且以这种形式创建的方法需要进行绑定。 render() {return(View style{styles.container}Text onPress{this.call_button.bind(this)}测试原生通讯/Text/View); } .... const styles StyleSheet.create({container: {flex:1,backgroundColor:deeppink,flexDirection:row,justifyContent:center,alignItems:center }, });RN调用原生的方法此时安卓的application就会启动完成之后它会去找Package列表进而找到自己创建的列表。而在组件的列表里面有一个原生模块列表到自己的模块列表里面调用模块里的方法就完成了调用。 2.2 RN 应用消息机制方式与安卓原生代码切换 在原生代码中添加一个按钮当用户从RN界面调用原生代码就会进入到原生代码开发的界面中而点击原生代码中的按钮就会返回到RN界面。 实施步骤如下 在与MainApplication同级的目录下创建一个MyActivity会自动生成一个自动布局文件activity_my做布局的工作。打开布局文件将左下角的Design切换成Text文件为原生界面创建一个按钮并且布局。 ?xml version1.0 encodingutf-8? RelativeLayoutandroid:layout_width match_parentandroid:layout_heightmatch_parentxmlns:android http://schemas.android.com/apk/res/androidButtonandroid:textgoBackandroid:onClickonBackandroid:layout_centerInParenttrueandroid:layout_widthwrap_contentandroid:layout_heightwrap_content/ /RelativeLayout回到新创建的MyActivity代码实现onBack方法。 //点击按钮直接完成 public void onBack(View v){finish(); }在MyNativeModule原生模块中去实现Activity。 //方法不能返回值 因为被调用的原生代码是异步的 原生代码执行结束之后只能通过回调函数或者发送消息给RN ReactMethod public void rnCallNative(String msg){Toast.makeText(mContext,msg,Toast.LENGTH_LONG).show();Intent intent new Intent(mContext,MyActivity.class); //创建一个意图意图是android进程之间、线程之间、交换数据的载体intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); //一定要加上这句mContext.startActivity(intent); }2.3 RN 应用 Promise 机制与安卓原生代码通信 使用Promise机制也是RN与原生通信的一种方式。在原生代码的MyNativeModule文件中创建桥接方法当桥接的原生方法的最后一个参数是一个Promise对象那么该方法会返回一个JS的Promise对象给与之对应的js方法。与上文类似需要暴露给RN的方法不能有返回值并且要以注释ReactMethod标识。 ReactMethod public void rnCallNative_promise(String msg,Promise promise){Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();//得到组件名称String componentName getCurrentActivity().getComponentName().toString();promise.resolve(componentName); }在RN中创建一个方法这个方法内部使用NativeModules组件来调用原生模块提供的名称进而找到要调用的原生方法。原生方法最后一个参数是一个promise所以在js中用.then的方法实现即可。 callAndroid_promise(){NativeModules.ToastModule.rnCallNative_promise(promise调用原生).then((msg) {console.log(promise收到消息:msg);}).catch((err){console.log(err);}) }渲染方法中调用方法。 Text style{styles.welcome} onPress{this.callAndroid_promise.bind(this)}Promise通信/Text .... welcome: {fontSize: 16,textAlign: left,margin: 10 }2.4 RN 应用 callback 回调方式与安卓原生代码通信 在原生模块中暴露一个桥接方法给RN调用参数传入一个成功的回调和一个失败的回调。 ReactMethod public void measureLayout(Callback errorCallback,Callback successCallback){try {successCallback.invoke(100,100,200,200); //调用回调函数返回结果}catch (IllegalViewOperationException e){errorCallback.invoke(e.getMessage());} }在js中实现回调方法。同样是通过NativeModules组件寻找到桥接名称ToastModule进而找到想要调用的方法。拿到返回的参数做功能处理。 callAndroid_callback(){NativeModules.ToastModule.measureLayout((msg){console.log(msg);},(x,y,width,height){console.log(x坐标:xy坐标:y高:height宽width);}) }在使用回调函数时会呈现出某些缺点比如说每次调用只应当调用一次多次调用可能会出现意想不到的结果并且用这种方法安卓原生代码是无法主动发送信息给RN侧的。 三、RN与IOS通信 首先 RN 与 IOS 通信,在原生端需创建一个bridge ,并遵守协议。 #import React/RCTBridgeModule.h interface PushModule : NSObjectRCTBridgeModule其次在implementation中导出 Module。 implementation PushModule RCT_EXPORT_MODULE()有以下3种通信方式。 3.1 定义导出的方法名 RCT_EXPORT_METHOD(pushEvent:(NSString *)event callback:(RCTResponseSenderBlock)callback){NSLog(----对React Native提供调用方法,Callback---%,event);NSString *callbackData 原生数据被RN调用; //准备回调回去的数据callback([[NSNull null],callbackData]); }定义一个方法后RN 就可通过NativeModules获取到对于 Module后调用相应方法event是 RN 传给 IOS 的值IOS 这边可通过 callback 这个 block 回调给 RN 数据。 callBackEvent (){NativeModules.PushModule.pushEvent((RN-原生的数据),(error, events) {if (error) {console.log(error);}else {alert(events)}}) }3.2 promise 实现回调函数 static RCTPromiseResolveBlock _resolve;//成功回调 static RCTPromiseRejectBlock _reject;//失败回调RCT_REMAP_METHOD(pushPromisesEvent,resolver:(RCTPromiseResolveBlock)resolverejecter:(RCTPromiseRejectBlock)reject){_resolve resolve;_reject reject;}//异步回调函数 (void) handleResult:(id)result{//原生Promises数据被RN调用if ([result isEqualToString:获取数据成功]) {_resolve([result]);}else{//返回错误信息NSError *error[NSError errorWithDomain:result code:101 userInfo:nil];_reject(no_events, There were no events, error);} }RN 侧方法调用。 NativeModules.PushModule.pushPromisesEvent().then((events){ alert(events1111) }).catch((e){ // alert(e)console.log(错误信息------e);}) }3.3 继承 RCTEventEmitter 类 #import React/RCTEventEmitter.h #import React/RCTBridgeModule.h interface PushModule : RCTEventEmitterRCTBridgeModule在 .m 的实现中有几个继承方法需要实现。 //IOS 回传给 RN 的通知方法 - (NSArray*)supportedEvents{return [Notice_name] }- (void)startObserving {[PushTool sharedPushTool].isReady YES;[[NSNotificationCenter defaultCenter] addObserver:selfselector:selector(notice:)name:event-noticeobject:nil]; }-(void)notice:(NSNotification*)notification {NSDictionary*obj notification.object;[self sendEventWithName:Notice_name body:obj]; }在 RN 侧实施监听。 var module new NativeEventEmitter(NativeModules.PushModule); module.addListener(Notice_name,(data)this.message(data));四、拓展阅读 《iOS开发进阶八ipa应用唤起并跳转至指定页面》