如何在React Native应用中集成外部.aar库并实现组件调用

你目前只完成了依赖引入，核心的原生桥接步骤没做——RN没法直接调用原生.aar里的方法，必须写桥接代码把原生功能暴露给JS层，下面是完整流程：

第一步：编写原生桥接模块 #

1. 创建模块类 #

在android/app/src/main/java/com/[你的项目包名]/下新建Java类（比如MyLibraryModule.java），示例代码：

package com.yourprojectname; // 替换成你自己的项目包名

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;
import [aar库的完整类路径]; // 导入你要调用的aar里的目标类

public class MyLibraryModule extends ReactContextBaseJavaModule {
    private final ReactApplicationContext reactContext;
    private AarLibraryClass aarInstance; // 声明aar库的实例

    public MyLibraryModule(ReactApplicationContext context) {
        super(context);
        reactContext = context;
        // 根据aar库的初始化要求创建实例，部分aar需要传入上下文参数
        aarInstance = new AarLibraryClass();
    }

    // 重点！这个返回值就是JS层NativeModules要调用的名称，大小写敏感
    @Override
    public String getName() {
        return "MyLibrary";
    }

    // 暴露给JS的方法，必须加@ReactMethod注解，用Callback处理异步结果
    @ReactMethod
    public void callAarMethod(String inputParam, Callback callback) {
        try {
            // 调用aar库的具体业务方法
            String result = aarInstance.yourAarFunction(inputParam);
            callback.invoke(null, result); // 成功时返回结果
        } catch (Exception e) {
            callback.invoke(e.getMessage(), null); // 失败时返回错误信息
        }
    }
}

2. 创建Package类注册模块 #

新建MyLibraryPackage.java文件，用于注册你的桥接模块：

package com.yourprojectname;

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 MyLibraryPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyLibraryModule(reactContext)); // 将你的模块加入列表
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList(); // 不需要自定义RN视图就返回空列表
    }
}

3. 在MainApplication中注册Package #

打开MainApplication.java，找到getPackages()方法，添加你的Package：

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 新增这一行，注册你的桥接包
    packages.add(new MyLibraryPackage());
    return packages;
}

第二步：JS层调用原生模块 #

现在可以在RN组件里正确调用aar的功能了，注意调用名称要和getName()返回值完全一致：

import { NativeModules } from 'react-native';

// MyLibrary对应原生模块getName()返回的名称
const { MyLibrary } = NativeModules;

// 用Promise封装异步调用，方便在组件中使用
const useAarFunction = async () => {
  try {
    const result = await new Promise((resolve, reject) => {
      MyLibrary.callAarMethod("测试参数", (error, res) => {
        error ? reject(error) : resolve(res);
      });
    });
    console.log("aar返回结果:", result);
  } catch (err) {
    console.error("调用失败:", err);
  }
};

常见问题排查 #

• 找不到NativeModules.MyLibrary？
  • 检查getName()返回值和JS中的调用名称是否完全匹配（大小写敏感）
  • 确认Package已经在MainApplication中注册
  • 清理并重建项目：执行cd android && ./gradlew clean && cd .. && npx react-native run-android
• 调用aar方法报错？
  • 确认aar库的类路径导入正确
  • 检查aar实例的初始化参数是否符合要求（比如部分aar需要传入Context，可将reactContext传入）

内容的提问来源于stack exchange，提问作者Zero0