緣由

有時(shí)候App需要訪問平臺(tái)api，但在RN中沒有相應(yīng)的模塊，或者需要你復(fù)用一些原生代碼，這就需要進(jìn)一步開發(fā)RN原生模塊。一般用React Native開發(fā)App時(shí)會(huì)用到一些原生模塊，比如：在做社會(huì)化分享、第三方登錄、掃描、通信錄，日歷等等。

開發(fā)原生模塊的主要流程

1. 編寫原生模塊的Java或者ios代碼； 2. js調(diào)用java原生代碼與數(shù)據(jù)交互； 3. 注冊與導(dǎo)出React Native原生模塊； 復(fù)制代碼

編寫原生模塊的Java代碼；

按照java規(guī)范，編寫相應(yīng)的功能。比如QQ的分享功能。

js調(diào)用java原生代碼與數(shù)據(jù)交互；

public class QQSDK extends ReactContextBaseJavaModule {@Overridepublic String getName() {return "QQSDK";}//釋放資源@Overridepublic void onCatalystInstanceDestroy() {super.onCatalystInstanceDestroy();// ... 省略部分代碼}@ReactMethodpublic void shareText(String text,int shareScene, final Promise promise) {// ... 省略部分代碼} 復(fù)制代碼

繼承 ReactContextBaseJavaModule，我們重寫了public String getName()方法，來暴露我們原生模塊的名字。并在 public void shareText(String text,int shareScene, final Promise promise)上添加了@ReactMethod注解來暴露接口，這樣以來我們就可以在js文件中來通過shareText調(diào)用我們所暴露給React Native的接口了。

數(shù)據(jù)交互方式分三種：Promise，Callbacks，DeviceEventEmitter，注意：前2個(gè)我們只能調(diào)用一次，RCTDeviceEventEmitter，它是原生模塊和js之間的一個(gè)事件發(fā)射器

//聲明：public void shareText(String text,int shareScene, final Promise promise) //js調(diào)用QQ. shareText(”text“,shareScene)..then(); 復(fù)制代碼//聲明：public void shareText(String text,int shareScene, Callback errorCallback,Callback successCallback) //js調(diào)用 Q. shareText(”text“,shareScene,(error)=>{console.log(error); },(result)=>{console.log(result); }) 復(fù)制代碼private void sendEvent(ReactContext reactContext,String eventName, @Nullable WritableMap params) {reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params); } 復(fù)制代碼

在上述方法中我們可以向js模塊發(fā)送任意次數(shù)的事件，其中eventName是我們要發(fā)送事件的事件名，params是此次事件所攜帶的數(shù)據(jù)，接下來呢我們就可以在js模塊中監(jiān)聽這個(gè)事件了

componentDidMount() {//注冊掃描監(jiān)聽DeviceEventEmitter.addListener('onScanningResult',this.onScanningResult); } onScanningResult = (e)=> {this.setState({scanningResult: e.result,}); } 復(fù)制代碼

另外，不要忘記在組件被卸載的時(shí)候移除監(jiān)聽：

componentWillUnmount(){DeviceEventEmitter.removeListener('onScanningResult',this.onScanningResult);//移除掃描監(jiān)聽 } 復(fù)制代碼

注冊與導(dǎo)出React Native原生模塊

• 只有我們注冊了剛才創(chuàng)建的原生模塊，在js中才能調(diào)用，

只需實(shí)現(xiàn)ReactPackage即可；模版代碼：如下

public class QQSDKPackage implements ReactPackage {@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new QQSDK(reactContext));return modules;}public List<Class<? extends JavaScriptModule>> createJSModules() {return Collections.emptyList();}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();} } 復(fù)制代碼

• 然后導(dǎo)出一個(gè)js模塊，以方便我們使用它 創(chuàng)建一個(gè)qqindex’.js文件，然后添加如下代碼：

import {NativeModules, NativeEventEmitter } from 'react-native';const {QQSDK} = NativeModules;export function shareText(text,shareScene) {return QQSDK.shareText(text,shareScene); } 復(fù)制代碼

• 接下來就可以在js中使用我們導(dǎo)出的代碼了

Q. shareText(”text“,shareScene,(error)=>{console.log(error); },(result)=>{console.log(result); })復(fù)制代碼

如有疏漏，請指出，如有問題可以通過如下方式聯(lián)系我

簡書 csdn 掘金 klvens跑碼場

總結(jié)

以上是生活随笔為你收集整理的RN 与android原生交互的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。