RN安卓原生模块

千金一刻莫空度，老大无成空自伤。这篇文章主要讲述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` }

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