React Native 中如何编写 Native Modules？

推荐答案

在 React Native 中编写 Native Modules 的步骤如下：

1. 创建 Native Module 类

在 Android 中，创建一个 Java 类并继承 ReactContextBaseJavaModule，在 iOS 中，创建一个 Objective-C 类并继承 NSObject。

2. 实现必要方法

在 Android 中，实现 getName() 方法以返回模块名称。在 iOS 中，使用 RCT_EXPORT_MODULE() 宏来定义模块名称。

3. 导出方法

在 Android 中，使用 @ReactMethod 注解来导出方法。在 iOS 中，使用 RCT_EXPORT_METHOD() 宏来导出方法。

4. 注册模块

在 Android 中，创建一个 ReactPackage 并在 createNativeModules() 方法中注册模块。在 iOS 中，React Native 会自动注册模块。

5. 在 JavaScript 中调用

使用 NativeModules 对象来访问和调用 Native Module 中的方法。

本题详细解读

Android 实现步骤

1. 创建 Native Module 类：

   -- -------------------- ---- -------
   ------ ----- -------------- ------- -------------------------- -
       ------ -------------------------------------- ------------- -
           --------------------
       -
   
       ---------
       ------ ------ --------- -
           ------ -----------------
       -
   
       ------------
       ------ ---- ------------------ -------- -
           -------------------------------------------- -------- --------------------------
       -
   -

2. 注册模块：

   -- -------------------- ---- -------
   ------ ----- -------------- ---------- ------------ -
       ---------
       ------ ------------------ ------------------------------------------- ------------- -
           ------------------ ------- - --- --------------
           --------------- ------------------------------
           ------ --------
       -
   
       ---------
       ------ ----------------- ------------------------------------------ ------------- -
           ------ ------------------------
       -
   -

3. 在 MainApplication.java 中注册包：

   @Override
   protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
           new MyReactPackage()
       );
   }

iOS 实现步骤

1. 创建 Native Module 类：

   -- -------------------- ---- -------
   ------- -------------------------
   
   ---------- -------------- - -------- -----------------
   ----
   
   --------------- --------------
   
   --------------------
   
   --------------------------------------- ---------- -
       ----------------- ------ - ------------------ ----------------------------------- --------------- --------------------------------------------
       ------------- --------- - -------------- --------------------- ------------------------------- -------------
       ------ --------------------
       --------------- ----------------------------------------------- --------------------------- ------------ ----------------
   -
   
   ----

JavaScript 调用

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.showMessage('Hello from Native Module!');

注意事项

• 线程安全：在 Android 中，@ReactMethod 方法默认在 UI 线程中执行。如果需要执行耗时操作，应考虑使用异步任务。
• 参数类型：确保 JavaScript 传递的参数类型与 Native 方法期望的类型一致。
• 调试：使用 console.log 或 Logcat 来调试 Native Module 中的问题。

通过以上步骤，你可以在 React Native 中成功编写并调用 Native Modules。