RN安卓原生模块

https://facebook.github.io/react-native/docs/native-modules-android.html

　　RN实际就是依附在原生平台上，把各种各样的RN组件展示出来。所以RN如果可以访问原生代码的话，可以实现更高的复用性，以及做一些RN做不到的事情，如多线程图片处理、访问数据库等。

代码复用：Toast案例

　　假设公司的安卓通用UI库中已经有一个toast了，我们就不需要再RN中再次实现一次，而是将这个UI库api包装成一个原生模块，给RN调用

　　原生模块就是一个类，通常需要继承ReactContextBaseJavaModule，需要实现一些这个类的方法

public class ToastModule extends ReactContextBaseJavaModule {

  private static final String DURATION_SHORT_KEY = "SHORT";

  private static final String DURATION_LONG_KEY = "LONG";

  public ToastModule(ReactApplicationContext reactContext) {

    super(reactContext);

  }

   // 在JS中通过这个name值来调用当前原生模块（ToastExample.xxx）

  @Override

  public String getName() {

    return "ToastExample";

  }

   // 这个方法不是必须的。用于给JS暴露常量

  @Override

  public Map<String, Object> getConstants() {

    final Map<String, Object> constants = new HashMap<>();

    constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);

    constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);

    return constants;

  }

   // 暴露给JS的方法必须加上ReactMethod注解，被修饰的方法始终是void返回值

  @ReactMethod

  public void show(String message, int duration) {

    Toast.makeText(getReactApplicationContext(), message, duration).show();

  }

}

　　以上的show方法之所以是void，是因为RN与原生代码通信使用的是RN bridge，这个过程是异步的，要想把数据传递给JS，就必须通过回调或者事件，后续会说到。

参数类型

　　被ReactMethod修饰的函数中，类型的对应关系如下：

Boolean -> Bool

Integer -> Number

Double -> Number

Float -> Number

String -> String

Callback -> function

ReadableMap-> Object

ReadableArray-> Array

注册模块

　　原生模块必须注册之后才能被RN调用。下面写好一个package

package com.facebook.react.modules.toast;

import com.facebook.react.ReactPackage;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;

import java.util.Collections;

import java.util.List;

public class AnExampleReactPackage implements ReactPackage {

  @Override

  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

    return Collections.emptyList();

  }

  @Override

  public List<NativeModule> createNativeModules(

                              ReactApplicationContext reactContext) {

    List<NativeModule> modules = new ArrayList<>();

    modules.add(new ToastModule(reactContext));

    return modules;

  }

}

　　package写好之后，在Application的getPackages函数中返回packager

protected List<ReactPackage> getPackages() {

    return Arrays.<ReactPackage>asList(

            new MainReactPackage(),

            new AnExampleReactPackage()); // <-- Add this line with your package name.

}

　　以上步骤完成之后，就可以通过NativeModules.ToastExample来访问原生模块了，但如果每次都这么直接访问会有性能消耗，所以一般是包装到一个JS模块中：

import {NativeModules} from 'react-native';

module.exports = NativeModules.ToastExample;

// 其他地方调用

import ToastExample from './ToastExample';

ToastExample.show('Awesome', ToastExample.SHORT);

回调

　　原生模块可以是复用已有的android UI（函数调用的声明式UI），也可以复用已有的java逻辑。

　　原生模块支持一个特别的参数，那就是回调，一般用于给JS提供函数返回值。原生模块中的回调函数只能被调用一次，可以存储起来，合适的时候再调用

import com.facebook.react.bridge.Callback;

public class UIManagerModule extends ReactContextBaseJavaModule {

...

  @ReactMethod

  public void measureLayout(

      int tag,

      int ancestorTag,

      Callback errorCallback,

      Callback successCallback) {

    try {

      measureLayout(tag, ancestorTag, mMeasureBuffer);

      float relativeX = PixelUtil.toDIPFromPixel(mMeasureBuffer[0]);

      float relativeY = PixelUtil.toDIPFromPixel(mMeasureBuffer[1]);

      float width = PixelUtil.toDIPFromPixel(mMeasureBuffer[2]);

      float height = PixelUtil.toDIPFromPixel(mMeasureBuffer[3]);

      successCallback.invoke(relativeX, relativeY, width, height);

    } catch (IllegalViewOperationException e) {

      errorCallback.invoke(e.getMessage());

    }

  }

...

　　以上代码在JS中这样来调用

UIManager.measureLayout(

  100,

  100,

  (msg) => {

    console.log(msg);

  },

  (x, y, width, height) => {

    console.log(x + ':' + y + ':' + width + ':' + height);

  }

);

　　因为RN bridge是异步的，所以当原生模块的回调函数执行后，JS中的回调函数不会马上执行，而是放在下一次事件循环

Promise

　　原生模块也支持promise，当配合async/await，可以简化我们的代码。当原生函数的最后一个参数是一个promise，则在JS中调用这个函数时，不需要传递这个promise参数，而且从语法上可以认为调用这个函数会返回一个promise（因为RN bridge是异步的）。把以上的方法改造如下：

import com.facebook.react.bridge.Promise;

public class UIManagerModule extends ReactContextBaseJavaModule {

...

  private static final String E_LAYOUT_ERROR = "E_LAYOUT_ERROR";

  @ReactMethod

  public void measureLayout(

      int tag,

      int ancestorTag,

      Promise promise) {

    try {

      measureLayout(tag, ancestorTag, mMeasureBuffer);

      WritableMap map = Arguments.createMap();

      map.putDouble("relativeX", PixelUtil.toDIPFromPixel(mMeasureBuffer[0]));

      map.putDouble("relativeY", PixelUtil.toDIPFromPixel(mMeasureBuffer[1]));

      map.putDouble("width", PixelUtil.toDIPFromPixel(mMeasureBuffer[2]));

      map.putDouble("height", PixelUtil.toDIPFromPixel(mMeasureBuffer[3]));

      promise.resolve(map);

    } catch (IllegalViewOperationException e) {

      promise.reject(E_LAYOUT_ERROR, e);

    }

  }

...

　　在JS的异步函数中调用以上的原生方法

async function measureLayout() {

  try {

    var {relativeX, relativeY, width, height} = await UIManager.measureLayout(

      100,

      100

    );

    console.log(relativeX + ':' + relativeY + ':' + width + ':' + height);

  } catch (e) {

    console.error(e);

  }

}

measureLayout();

事件

　　原生模块中可以发送事件给JS而不是invoke一个回调方法

...

private void sendEvent(ReactContext reactContext,

                       String eventName,

                       @Nullable WritableMap params) {

  reactContext

      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

      .emit(eventName, params);

}

...

WritableMap params = Arguments.createMap();

...

sendEvent(reactContext, "keyboardWillShow", params);

　　RN中对这个消息注册监听

...

componentWillMount: function() {

  DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {

    // handle event.

  });

}

...

从activity的startActivityForResult中获取结果

　　因为RN组件最终是显示到activity上的，所以调用的原生模块的最终执行环境也还是activity，可以借助原生模块来监听activity的事件。

　　做到这一点需要在JS中监听activity的onActivityResult（activity必须通过startActivityForResult启动）。方法是让Activity继承BaseActivityEventListener（推荐，对后续API更新更加友好）或者实现ActivityEventListener接口。

　　首先在模块中创建监听器，需要实现监听器的onActivityResult方法，里面获取结果响应到成员变量promise中。

　　接着在原生模块（回顾，就是一个类继承了ReactContextBaseJavaModule）的构造函数中注册刚刚的监听器。

reactContext.addActivityEventListener(mActivityResultListener);

　　以下以获取图片为例子。原生模块给JS暴露一个pickImage方法，这个方法返回图片的路径

public class ImagePickerModule extends ReactContextBaseJavaModule {

  private static final int IMAGE_PICKER_REQUEST = 467081;

  private static final String E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST";

  private static final String E_PICKER_CANCELLED = "E_PICKER_CANCELLED";

  private static final String E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER";

  private static final String E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND";

  private Promise mPickerPromise;

  private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {

    @Override

    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {

      if (requestCode == IMAGE_PICKER_REQUEST) {

        if (mPickerPromise != null) {

          if (resultCode == Activity.RESULT_CANCELED) {

            mPickerPromise.reject(E_PICKER_CANCELLED, "Image picker was cancelled");

          } else if (resultCode == Activity.RESULT_OK) {

            Uri uri = intent.getData();

            if (uri == null) {

              mPickerPromise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found");

            } else {

              mPickerPromise.resolve(uri.toString());

            }

          }

          mPickerPromise = null;

        }

      }

    }

  };

  public ImagePickerModule(ReactApplicationContext reactContext) {

    super(reactContext);

    // Add the listener for `onActivityResult`

    reactContext.addActivityEventListener(mActivityEventListener);

  }

  @Override

  public String getName() {

    return "ImagePickerModule";

  }

  @ReactMethod

  public void pickImage(final Promise promise) {

    Activity currentActivity = getCurrentActivity();

    if (currentActivity == null) {

      promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist");

      return;

    }

    // Store the promise to resolve/reject when picker returns data

    mPickerPromise = promise;

    try {

      final Intent galleryIntent = new Intent(Intent.ACTION_PICK);

      galleryIntent.setType("image/*");

      final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");

      currentActivity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST);

    } catch (Exception e) {

      mPickerPromise.reject(E_FAILED_TO_SHOW_PICKER, e);

      mPickerPromise = null;

    }

  }

}

　　总结以上流程

创建监听器，把结果响应到成员变量promise中
构造函数中注册监听器（这里注册到reactContext的监听器是全局监听的吗？）
调用模块方法，里面通过startActivityForResult打开相册，把原生方法最后的参数promise传递给成员promise
相册结束后，以上的监听器会执行，将结果响应给成员promise

RN监听activity生命周期

　　模块实现LifecycleEventListener，在模块的构造器中注册

reactContext.addLifecycleEventListener(this);

　　最后实现以下方法就可以监听activity的生命周期了

@Override

public void onHostResume() {

    // Activity `onResume`

}

@Override

public void onHostPause() {

    // Activity `onPause`

}

@Override

public void onHostDestroy() {

    // Activity `onDestroy`

}

　　因为以上生命周期可能执行多次，所以不要把JS的回调函数放到里面来执行，因为JS传递进来的回调函数只能执行一次，可以在里面往JS传递事件

巴特西