RN安卓原生模块

Posted 2020-10-21 HelloHello233

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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传递事件

以上是关于RN安卓原生模块的主要内容，如果未能解决你的问题，请参考以下文章

RN-Android 封装原生安卓web组件 - H5白屏/卡顿/渲染问题

RN 调用原生WebPage 解决微信支付Referer问题

RN - 封装Android原生WebView组件,实现JS获取原生消息回调及JS控制native组件

RN调用原生的方法

RN系列：Android原生与RN如何交互通信