RN安卓原生模块

Posted 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;
    }
  }
}

  总结以上流程

  1. 创建监听器,把结果响应到成员变量promise中
  2. 构造函数中注册监听器(这里注册到reactContext的监听器是全局监听的吗?)
  3. 调用模块方法,里面通过startActivityForResult打开相册,把原生方法最后的参数promise传递给成员promise
  4. 相册结束后,以上的监听器会执行,将结果响应给成员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-Android 封装原生安卓web组件 - H5白屏/卡顿/渲染问题

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

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

RN调用原生的方法

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