React Native 中如何调用 Native Modules？

推荐答案

在 React Native 中调用 Native Modules 的步骤如下：

1. 创建 Native Module：

   • 对于 iOS，使用 Objective-C 或 Swift 创建一个类，并实现 RCTBridgeModule 协议。
   • 对于 Android，使用 Java 或 Kotlin 创建一个类，并继承 ReactContextBaseJavaModule。

2. 注册 Native Module：

   • 对于 iOS，在 RCT_EXPORT_MODULE() 宏中注册模块。
   • 对于 Android，在 ReactPackage 中注册模块。

3. 暴露方法：

   • 对于 iOS，使用 RCT_EXPORT_METHOD() 宏暴露方法。
   • 对于 Android，使用 @ReactMethod 注解暴露方法。

4. 在 JavaScript 中调用 Native Module：

   • 使用 NativeModules 对象来调用暴露的 Native 方法。

本题详细解读

1. 创建 Native Module

iOS

在 iOS 中，创建一个新的 Objective-C 或 Swift 类，并实现 RCTBridgeModule 协议。例如：

// 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

Android

在 Android 中，创建一个新的 Java 或 Kotlin 类，并继承 ReactContextBaseJavaModule。例如：

// www.javascriptcn.com code example
package com.myapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import android.widget.Toast;

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. 注册 Native Module

iOS

在 iOS 中，使用 RCT_EXPORT_MODULE() 宏来注册模块。这个宏会自动将模块注册到 React Native 的桥接器中。

Android

在 Android 中，需要在 ReactPackage 中注册模块。例如：

// www.javascriptcn.com code example
package com.myapp;

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 MyAppPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new MyNativeModule(reactContext));
    return modules;
  }
}

然后在 MainApplication.java 中注册这个 ReactPackage：

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

3. 暴露方法

iOS

在 iOS 中，使用 RCT_EXPORT_METHOD() 宏来暴露方法。这个方法会将 Objective-C 或 Swift 方法暴露给 JavaScript。

Android

在 Android 中，使用 @ReactMethod 注解来暴露方法。这个注解会将 Java 或 Kotlin 方法暴露给 JavaScript。

4. 在 JavaScript 中调用 Native Module

在 JavaScript 中，使用 NativeModules 对象来调用暴露的 Native 方法。例如：

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.showMessage('Hello from JavaScript!');

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