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 类：

   // www.javascriptcn.com code example
   public class MyNativeModule extends ReactContextBaseJavaModule {
       public MyNativeModule(ReactApplicationContext reactContext) {
           super(reactContext);
       }
   
       @Override
       public String getName() {
           return "MyNativeModule";
       }
   
       @ReactMethod
       public void showMessage(String message) {
           Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show();
       }
   }

2. 注册模块：

   // www.javascriptcn.com code example
   public class MyReactPackage implements ReactPackage {
       @Override
       public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
           List<NativeModule> modules = new ArrayList<>();
           modules.add(new MyNativeModule(reactContext));
           return modules;
       }
   
       @Override
       public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
   }

3. 在 MainApplication.java 中注册包：

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

iOS 实现步骤

1. 创建 Native Module 类：

   // www.javascriptcn.com code example
   #import <React/RCTBridgeModule.h>
   
   @interface MyNativeModule : NSObject <RCTBridgeModule>
   @end
   
   @implementation MyNativeModule
   
   RCT_EXPORT_MODULE();
   
   RCT_EXPORT_METHOD(showMessage:(NSString *)message) {
       UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Message" message:message preferredStyle:UIAlertControllerStyleAlert];
       UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
       [alert addAction:okAction];
       [[UIApplication sharedApplication].keyWindow.rootViewController presentViewController:alert animated:YES completion:nil];
   }
   
   @end

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。