React Native創建原生模塊

我的博客原文地址
在React Native開發過程中，有時候我們可能需要訪問平臺的API，但React Native還沒有相應的實現，或者是React Native還不支持一些原生的屬性，我們需要調用原生代碼來實現，或者是我們需要複用一些原來的Java代碼，這個時候我們就需要創建一個原生模塊來自己實現對我們需要功能的封裝。

可以參考官方文檔或中文文檔。

開發模塊

實現模塊

下面我們就通過實現一個自定義模塊，來熟悉編寫原生模塊需要用的一些知識。該模塊主要實現調用一些Android原生的功能，比如彈Toast，啓動Activity等。
我們首先來創建一個原生模塊。一個原生模塊是一個繼承了 ReactContextBaseJavaModule 的Java類，它有一個必須實現的方法getName()，它返回一個字符串名字，在JS中我們就使用這個名字調用這個模塊；還有構造函數NativeModule。
然後在這個類裏面實現我們需要實現的方法：

public class MyNativeModule extends ReactContextBaseJavaModule {
    private final static String MODULE_NAME = "MyNativeModule";
    private static final  String TestEvent = "TestEvent";
    private ReactApplicationContext mContext;
    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    @Override
    public String getName() {
        return MODULE_NAME;
    }

    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put("SHORT", Toast.LENGTH_SHORT);
        constants.put("LONG", Toast.LENGTH_LONG);
        constants.put("NATIVE_MODULE_NAME", MODULE_NAME);
        constants.put(TestEvent, TestEvent);
        return constants;
    }

    @ReactMethod
    public void startActivity(){
        Intent intent = new Intent(mContext,SecondActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        mContext.startActivity(intent);
    }

    @ReactMethod
    public void showToast(String msg, int duration){
        Toast.makeText(mContext, msg, duration).show();
    }
}

React Native調用的方法需要使用@ReactMethod註解。
方法的返回類型必須爲void。

參數類型

原生Java數據類型和JS數據類型的映射關係：

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

詳情參考：ReadableMap和ReadableArray

導出常量

可以實現getContants方法導出需要給JavaScript使用的常量。

    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put("SHORT", Toast.LENGTH_SHORT);
        constants.put("LONG", Toast.LENGTH_LONG);
        constants.put("NATIVE_MODULE_NAME", MODULE_NAME);
        constants.put(TestEvent, TestEvent);
        return constants;
    }

註冊模塊

然後我還要註冊這個模塊，通過實現ReactPackage接口來實現：

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

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

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

添加模塊

在Application的getPackages()方法中添加模塊：

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(), new MyReactPackage()
            );
        }

或者是在Activity的onCreate中：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new MyReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
        setContentView(mReactRootView);
    }

封裝模塊

爲了使JavaScript端訪問起來更爲方便，通常我們都會把原生模塊封裝成一個JavaScript模塊。在index.android.js文件的同一目錄下面創建一個MyNativeModule.js。

'use strict';

import { NativeModules } from 'react-native'; 

// 這裏的MyNativeModule必須對應
// public String getName()中返回的字符串

export default NativeModules.MyNativeModule;

調用模塊

現在，在別處的JavaScript代碼中可以這樣調用你的方法：

import MyNativeModule from './MyNativeModule'; 
class HelloWorld extends React.Component {
  startActivity(){
    console.log("MODULE NAME: ",MyNativeModule.NATIVE_MODULE_NAME);
    MyNativeModule.startActivity();
  }
  showToast(){
    console.log("MODULE NAME: ",MyNativeModule.NATIVE_MODULE_NAME);
    MyNativeModule.showToast("From JS", MyNativeModule.LONG);
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.startActivity}>  
          <Text style={styles.hello}>start Activity</Text>  
        </TouchableOpacity>
      </View>
    )
  }
}

其他特性

React Native的跨語言訪問是異步進行的，所以想要給JavaScript返回一個值的唯一辦法是使用回調函數或者發送事件。

回調函數

原生模塊還支持一種特殊的參數——回調函數。它提供了一個函數來把返回值傳回給JS。

    @ReactMethod
    public void testCallback(int para1, int para2, Callback resultCallback){
        int result = para1 + para2;
        resultCallback.invoke(result);
    }

可以在JS中調用：

  testCallback(){
    MyNativeModule.testCallback(100,100,(result) => {
    console.log("result: ",result); //'result: ', 200
    });
  }

原生模塊通常只應調用回調函數一次。但是，它可以保存callback並在將來調用。
callback並非在對應的原生函數返回後立即被執行——注意跨語言通訊是異步的，這個執行過程會通過消息循環來進行。

發送事件到JavaScript

原生模塊可以在沒有被調用的情況下往JavaScript發送事件通知。最簡單的辦法就是通過RCTDeviceEventEmitter，這可以通過ReactContext來獲得對應的引用：

    public void sendEvent(){
        WritableMap params = Arguments.createMap();
        params.putString("module", "MyNativeModule");
        mContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(TestEvent, params);
    }

在JS中這樣調用：

import { DeviceEventEmitter } from 'react-native';
......
  componentWillMount() {
    console.log("componentWillMount");
    //接收事件
    DeviceEventEmitter.addListener(MyNativeModule.TestEvent, info => {
      console.log(info);
    });
  }

Promise

如果對ES6的Promise對象不太熟悉的話，可以點這裏進行了解。
原生模塊還可以使用promise來簡化代碼，搭配ES2016(ES7)標準的async/await語法則效果更佳。如果橋接原生方法的最後一個參數是一個Promise，則對應的JS方法就會返回一個Promise對象。
Promise是異步編程的一種解決方案，比傳統的解決方案（回調函數和事件）更合理和更強大。

    @ReactMethod
    public void testPromise(Boolean isResolve, Promise promise) {
        if(isResolve) {
            promise.resolve(isResolve.toString());
        }
        else {
            promise.reject(isResolve.toString());
        }
    }

在JS中調用：

  testPromise(){
    MyNativeModule.testPromise(true)
    .then(result => {
      console.log("result1 is ", result);
    })
    .catch(result => {
      console.log("result2 is ", result);
    });
  }

這裏可以用then方法分別指定Resolved狀態和Reject狀態的回調函數。第一個回調函數是Promise對象的狀態變爲Resolved時調用，第二個回調函數是Promise對象的狀態變爲Reject時調用。其中，第二個函數是可選的，不一定要提供。
catch方法用於指定發生錯誤時的回調函數。
結果：'result1 is ', 'true'

從startActivityForResult中獲取結果

參考官方文檔

監聽生命週期

監聽activity的生命週期事件（比如onResume, onPause等等），模塊必須實現LifecycleEventListener，然後需要在構造函數中註冊一個監聽函數：

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
        //添加監聽
        reactContext.addLifecycleEventListener(this);
    }

實現LifecycleEventListener的幾個接口：

    @Override
    public void onHostResume() {
        Log.e(MODULE_NAME, "onHostResume");
    }

    @Override
    public void onHostPause() {
        Log.e(MODULE_NAME, "onHostPause");
    }

    @Override
    public void onHostDestroy() {
        Log.e(MODULE_NAME, "onHostDestroy");
    }

然後就可以監聽ReactNative應用的生命週期了。