ReactNative呼叫Android原生模組

有時候App需要訪問平臺API，但React Native可能還沒有相應的模組包裝；或者你需要複用一些Java程式碼，而不是用Javascript重新實現一遍；又或者你需要實現某些高效能的、多執行緒的程式碼，譬如圖片處理、資料庫、或者各種高階擴充套件等等。
我們把React Native設計為可以在其基礎上編寫真正的原生程式碼，並且可以訪問平臺所有的能力。要想實現訪問Android原生API，總結一下，主要有以下幾個步驟：

1. 建立一個原生模組

這個原生模組是一個繼承ReactContextBaseJavaModule的Java類,它可以實現一些JavaScript所呼叫的原生功能。我們的目標是可以在JavaScript裡寫ToastAndroid.show(`Awesome`, ToastAndroid.SHORT);，來調起一個Toast通知。例如：

public class RnTest extends ReactContextBaseJavaModule {
  public RnTest(ReactApplicationContext reactContext) {
    super(reactContext);
  }
  // ReactContextBaseJavaModule要求派生類實現getName方法。這個函式用於返回一個字串
  // 這個字串用於在JavaScript端標記這個原生模組
  @Override
  public String getName() {
    return "ToastByAndroid";
  }
  // 獲取應用包名
  // 要匯出一個方法給JavaScript使用，Java方法需要使用註解@ReactMethod
   @ReactMethod
   public void getPackageName() {
     String name = getReactApplicationContext().getPackageName();
     Toast.makeText(getReactApplicationContext(),name,Toast.LENGTH_LONG).show();
    }
}

ReactContextBaseJavaModule要求派生類實現getName方法。這個函式用於返回一個字串名字，這個名字在JavaScript端標記這個模組。這裡我們把這個模組叫做ToastByAndroid，這樣就可以在JavaScript中通過React.NativeModules.ToastByAndroid訪問到這個模組。
注意：模組名前的RCT字首會被自動移除。所以如果返回的字串為”RCTToastAndroid”，在JavaScript端依然通過React.NativeModules.ToastByAndroid訪問到這個模組。

2. 註冊模組

要使JavaScript端呼叫到原生模組還需註冊這個原生模組，需要實現一個類實現ReactPackage介面，並實現其中的抽象方法。例如：

public class ExampleReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      List<NativeModule> modules = new ArrayList<>();
      modules.add(new RnTest(reactContext));
      return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
      return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Collections.emptyList();
    }
}

MainApplication宣告

除了上面的步驟外，還需在MainApplication.java檔案中的getPackages方法中，例項化上面的註冊類。例如：

 @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      // 例項化註冊類
      new ExampleReactPackage());
    }
  };

3. JS呼叫android原生方法

3.1 引入NativeModules模組

import { NativeModules } from `react-native`;

3.2 呼叫Android原生方法

var rnToastAndroid = NativeModules.ToastByAndroid;
rnToastAndroid.getPackageName();

4. 獲取android返回值

提供給js呼叫的原生android方法的返回型別必須是void，React Native的跨語言訪問是非同步進行的，所以想要給JavaScript返回一個值的唯一辦法是使用回撥函式或者傳送事件。

4.1 回撥函式

Callback是React.bridge中的一個介面，它作為ReactMethod的一個傳參，用來對映JavaScript的回撥函式（function）。Callback介面只定義了一個方法invoke，invoke接受多個引數，這個引數必須是react.bridge中支援的引數。
Android端程式碼：

 @ReactMethod
  public void tryCallBack(String name,String psw,Callback errorCallback,Callback successCallback){
    try{
      if(TextUtils.isEmpty(name)&&TextUtils.isEmpty(psw)){
        // 失敗時回撥
        errorCallback.invoke("user or psw  is empty");
      }
      // 成功時回撥
      successCallback.invoke("add user success");
     }catch(IllegalViewOperationException e){
        // 失敗時回撥
        errorCallback.invoke(e.getMessage());
      }
    }

rn端程式碼：

var rnToastAndroid = NativeModules.ToastByAndroid;
rnToastAndroid.tryCallBack("luo","131",(errorCallback)=>{alert(errorCallback)},(successCallback)=>{alert(successCallback);});

5.呼叫測試

android主動向rn傳送訊息。

5.1 android端程式碼

public  static void sendEvent(ReactContext reactContext, String eventName, int status)
    {
        System.out.println("reactContext="+reactContext);

        reactContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName,status);
    }

5.2 RN端程式碼

// eventName為5.1中的eventName，reminder為5.1中的status
DeviceEventEmitter.addListener(eventName, (reminder) => {
      console.log(reminder):
    });

RN呼叫Android原生模組的程式碼如下：

const RNBridgeModule = NativeModules.RNBridgeModule;
nativeLanuchApp(message) {
    RNBridgeModule.nativePlayVideo(message);
  }

  <TouchableOpacity onPress={() => {
                            this.nativeLanuchApp("111");
                        }} >
      <Text >
        try
      </Text>
    </TouchableOpacity>