緣由

有時候App需要訪問平臺api，但在RN中沒有相應的模塊，或者需要你復用一些原生代碼，這就需要進一步開發RN原生模塊。一般用React Native開發App時會用到一些原生模塊，比如：在做社會化分享、第三方登錄、掃描、通信錄，日歷等等。

開發原生模塊的主要流程

1. 編寫原生模塊的Java或者ios代碼； 2. js調用java原生代碼與數據交互； 3. 注冊與導出React Native原生模塊； 復制代碼

編寫原生模塊的Java代碼；

按照java規范，編寫相應的功能。比如QQ的分享功能。

js調用java原生代碼與數據交互；

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) {// ... 省略部分代碼} 復制代碼

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

數據交互方式分三種：Promise，Callbacks，DeviceEventEmitter，注意：前2個我們只能調用一次，RCTDeviceEventEmitter，它是原生模塊和js之間的一個事件發射器

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

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

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

另外，不要忘記在組件被卸載的時候移除監聽：

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

注冊與導出React Native原生模塊

• 只有我們注冊了剛才創建的原生模塊，在js中才能調用，

只需實現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();} } 復制代碼

• 然后導出一個js模塊，以方便我們使用它 創建一個qqindex’.js文件，然后添加如下代碼：

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

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

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

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

簡書 csdn 掘金 klvens跑碼場

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。