RN 與android原生交互

原因

有時候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 {
    @Override
    public String getName() {
        return "QQSDK";
    }

//釋放資源
    @Override
    public void onCatalystInstanceDestroy() {
        super.onCatalystInstanceDestroy();
        // ...   省略部分代碼
    }

      @ReactMethod
    public 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 {
    @Override
    public 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();
    }
    @Override
    public 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跑碼場