环球热点评！React 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 (           {          // 从原生模块中取出前面注册好的 AppModule，该模块的名称为 CustomApp          const {CustomApp} = NativeModules;          // 调用原生模块的方法          CustomApp?.openGallery();        }}      />      );};const styles = StyleSheet.create({  root: {    width: "100%",    height: "100%",  },});

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

原生模块暴露带返回值的方法

上面的示例中，提供了一个没有返回值的 getGallery 方法供 JS 层调用，那如果有返回值的方法该怎么写呢？

这里需要特别注意一点，从 JS 层调用原生层的方法是一个异步的过程，所以，原生层中带返回值的方法不能直接返回，而是要用 Promise 来实现

原生层提供一个返回应用版本名称的方法 getVersionName

JS 层读取版本名称

重启项目以后，运行效果如下图

桥接原生常量

◆ 编写并注册原生常量方法

在 AppModule 原生组件中重写一个 getConstants方法

◆ JS 层获取原生常量（同步获取）

在 JS 层可以直接读取原生组件的常量，无需异步获取

重启项目以后，运行效果如下图

关键词：