如何在 React Native 中调用 Android 原生代码
在 React Native 中，有时可能需要调用一些 Android 原生功能。这篇文章将为您提供一个完整的指南，从流程到代码实现，帮助您轻松完成 React Native 调用 Android 原生代码的任务。
流程概述
为了清晰地理解整个过程，以下是调用 Android 原生代码的基本步骤：
| 步骤 | 描述 |
|---|---|
| 1 | 创建一个 React Native 项目 |
| 2 | 在 Android 文件夹中创建原生模块 |
| 3 | 在模块中编写 Java 代码 |
| 4 | 将原生模块暴露给 React Native |
| 5 | 在 JavaScript 中调用原生模块 |
接下来，我们将逐步分析每个步骤。
步骤详解
步骤 1: 创建一个 React Native 项目
首先，我们需要用 React Native CLI 创建一个新项目。打开终端并执行：
npx react-native init MyProject
这将创建一个名为 MyProject 的新项目。
步骤 2: 在 Android 文件夹中创建原生模块
导航到项目的 Android 目录，通常是 MyProject/android/app/src/main/java/com/myproject/。在该目录下，创建一个新的 Java 文件，命名为 MyNativeModule.java。
步骤 3: 在模块中编写 Java 代码
在 MyNativeModule.java 文件中编写 Java 代码，代码如下所示：
package com.myproject;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
public class MyNativeModule extends ReactContextBaseJavaModule {
public MyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "MyNativeModule";
}
@ReactMethod
public void add(int a, int b, Promise promise) {
int result = a + b; // 计算 a 和 b 的和
promise.resolve(result); // 返回计算结果
}
}
说明：
ReactContextBaseJavaModule是我们创建原生模块时需要扩展的类。getName()方法返回模块的名称。@ReactMethod注解的方法可以被 JavaScript 调用。Promise用于在异步操作完成后返回结果。
步骤 4: 将原生模块暴露给 React Native
需要在 MainApplication.java 中注册此模块。在 MyProject/android/app/src/main/java/com/myproject/MainApplication.java 中，找到 getPackages 方法，修改如下：
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyNativePackage() // 注册你自己的模块
);
}
现在，在同一目录下创建 MyNativePackage.java 文件，内容如下：
package com.myproject;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class MyNativePackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new MyNativeModule(reactContext)); // 添加你的模块
return modules;
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList(); // 更新方法，不再需要
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
步骤 5: 在 JavaScript 中调用原生模块
现在您可以在 React Native 的 JavaScript 代码中调用这个原生模块。打开 App.js 文件，添加以下内容：
import React from 'react';
import { NativeModules, Button, Alert } from 'react-native';
const { MyNativeModule } = NativeModules;
const App = () => {
const onPress = () => {
MyNativeModule.add(5, 15, (result) => { // 调用原生方法
Alert.alert('Result', `The result is: ${result}`); // 显示结果
});
};
return (
<Button title="Add Numbers" onPress={onPress} />
);
};
export default App;
说明：
- 使用
NativeModules导入模块。 MyNativeModule.add调用我们之前定义的方法，并使用回调函数获取结果。
类图
以下是该模块的类图，使用 Mermaid 语言表示：
classDiagram
class MyNativeModule {
+String getName()
+void add(int a, int b, Promise promise)
}
class MainApplication {
+List<ReactPackage> getPackages()
}
class MyNativePackage {
+List<NativeModule> createNativeModules(ReactApplicationContext reactContext)
}
MyNativeModule --> MyNativePackage
MainApplication --> MyNativePackage
旅行图
以下是调用 Android 原生模块的旅行图：
journey
title 在 React Native 中调用 Android 原生代码
section 准备工作
创建 React Native 项目: 5: 用户
导航到 Android 目录: 4: 用户
section 编写代码
创建原生模块: 3: 用户
编写 Java 代码: 2: 用户
section 暴露和调用
注册模块: 3: 用户
在 JavaScript 中调用: 4: 用户
结尾
通过上述步骤，您应该能够在 React Native 项目中成功调用 Android 原生代码。这种方法为您提供了更大的灵活性，确保您可以利用 Android 的所有强大功能。希望通过本指南，您能轻松地开始在您的应用中集成原生功能。如果您有任何问题，或需要进一步的帮助，请随时询问！
