React Native 桥接原生模块

标签：原生 AppModule 桥接 JS React 模块 import 方法 Native

原生模块简介

有时候一个 RN 应用需要访问一个原生平台的 API 比如相机，但是，默认情况下 JavaScript 是无法访问原生 API 的。

原生模块系统暴露了一些 Java 类的实例对象给 JavaScript，这样就可以允许开发者在 JS 代码中执行一些特定的原生代码。

简单来说，桥接原生就是为了实现 react 层 JS 实现不了的需求，比如：

复杂、高性能组件：复杂表格、视频播放等；
原生层开发能力：传感器编程、widget等；
平台属性：系统信息、设备信息等；
对接三方应用：相机、相册、地图等；

桥接原生方法

◆ 编写并注册原生层方法

1、使用 Android Studio 编辑器依次找到 android > app > src > main > java > com.rndemo (RN应用的项目名称) > MainApplication.java

找到 getPackages 这个方法，可以看到该方法返回的是 ReactNative 桥接的各种包，当前还没有添加任何自定义的包

2、在上一步的 com.rndemo 这个包下新建一个 rn 文件夹，然后在 rn 目录下新建一个 RnDemoPackage.java

3、新建好的这个类需要实现 ReactPackage 接口，该接口会重写两个方法 createNativeModules 和 createViewManagers

createNativeModules：用来导入 RN 原生模块

createViewManagers：用来导入 RN 原生组件

4、从图中可以看到 createNativeModules 方法返回的是一个原生模块（NativeModule）的集合，因此，这里先新建一个原生模块，取名为 AppModule.java

该类需要继承 ReactContextBaseJavaModule，并且重写 getName 方法

同时，AppModule 还需要一个构造函数，这里可以同时按住键盘 Alt + Insert，在弹出的窗口中选择 Constructor

在 Choose Super Class Constructor 窗口中提供了 2 个构造函数，这里选择第 2 个带参的构造函数

5、假如 AppModule 这个原生模块需要给 JavaScript 暴露一个打开手机相册的方法，这里可以给 AppModule 添加一个 openGallery 方法，并且添加注解 @ReactMethod 用来修饰 JS 调用的原生方法

至于方法中使用到的 DeviceUtil 这个工具类是我们提前准备好的，其位置在 rn 同级的 utils 目录下

最终原生模块 AppModule 的代码如下

package com.rndemo.rn;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.rndemo.utils.DeviceUtil;

public class AppModule extends ReactContextBaseJavaModule {
    public AppModule(@Nullable ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @NonNull
    @Override
    public String getName() {
    // 返回原生模块注册时的名称，也就是说从 react 层的 js 代码中调用 AppModule 这个原生模块，必须先知道这个模块叫什么名称
    // 这里约定 AppModule 原生模块暴露的名字叫 CustomApp，也可以叫其它的
        return "CustomApp";
    }

    @ReactMethod
    public void openGallery() {
        // 判空
        if (getCurrentActivity() == null) {
            return;
        }
        DeviceUtil.openGallery(getCurrentActivity());
    }
}

6、回到上一步新建的 RnDemoPackage 类中，createNativeModules 这个方法返回的是一个原生模块（NativeModule）的集合，这里可以将刚才注册好的 AppModule 注册进来

7、最后，回到 MainApplication.java，把 RnDeomoPackage 注册进去

◆ JS 层调用原生方法

可以从 NativeModules 中取出注册好的原生模块，调用原生模块的方法

import React from 'react';
import {StyleSheet, View, Button, NativeModules} from 'react-native';

export default () => {
  return (
    <View style={styles.root}>
      <Button
        title="桥接原生方法"
        onPress={() => {
          // 从原生模块中取出前面注册好的 AppModule，该模块的名称为 CustomApp
          const {CustomApp} = NativeModules;
          // 调用原生模块的方法
          CustomApp?.openGallery();
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
});

上例中，点击按钮就会读取相册，由于谷歌模拟器的效果不是很直观，这里直接展示手机模拟器的效果图