React Native 通过 JavaScript 接口与原生代码通信,这是通过名为 Bridge 的机制实现的。Bridge 负责在 JavaScript 和原生端之间建立通信桥梁。
以下是调用 Android 原生功能的基本步骤:
在 JavaScript 中,使用 React Native 提供的模块创建一个接口。
这个接口会被编译成 Java 或 Kotlin 代码,并在 Android 项目的 android/app/src/main/java/<你的包名>/ 目录下的相应 Module 中实现。
实现原生功能的具体代码。
通过 Bridge 将原生功能暴露给 JavaScript。
例如,如果你想要调用 Android 的 Toast 功能,你可以创建一个名为 ToastExample 的模块:
// ToastExample.javapackage com.yourpackage;import android.widget.Toast;
import android.content.Context;import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.module.annotations.ReactModule;@ReactModule(name = ToastExampleModule)
public class ToastExample extends ReactContextBaseJavaModule {ToastExample(ReactApplicationContext context) {super(context);}@Overridepublic String getName() {return "ToastExample";}@ReactMethodpublic void show(String message, int duration) {Toast.makeText(getReactApplicationContext(), message, duration).show();}
}
然后在 JavaScript 中这样使用:
import { NativeModules } from 'react-native';NativeModules.ToastExample.show('Hello, World!', NativeModules.ToastExample.LENGTH_LONG);
这个例子中,我们创建了一个名为 ToastExample 的模块,并在其中定义了一个 show 方法,该方法通过调用 Android 的 Toast 功能来显示一条消息。然后在 JavaScript 中,我们通过 NativeModules.ToastExample.show 调用这个方法。