React Native 中如何与原生代码交互？

推荐答案

在 React Native 中，与原生代码交互主要通过以下几种方式实现：

1. Native Modules：通过创建原生模块，将原生代码暴露给 JavaScript 调用。
2. Native UI Components：通过创建原生 UI 组件，将原生视图嵌入到 React Native 应用中。
3. Event Emitters：通过事件发射器，从原生代码向 JavaScript 发送事件。

Native Modules

Native Modules 允许你在 JavaScript 中调用原生代码。你可以通过以下步骤创建一个 Native Module：

1. 在原生代码中创建一个类，并实现 RCTBridgeModule 协议（iOS）或继承 ReactContextBaseJavaModule（Android）。
2. 使用 RCT_EXPORT_MODULE() 宏（iOS）或 @ReactModule 注解（Android）将模块暴露给 JavaScript。
3. 使用 RCT_EXPORT_METHOD() 宏（iOS）或 @ReactMethod 注解（Android）将方法暴露给 JavaScript。

Native UI Components

Native UI Components 允许你在 React Native 中使用原生视图。你可以通过以下步骤创建一个 Native UI Component：

1. 在原生代码中创建一个视图类，并实现 RCTViewManager 协议（iOS）或继承 SimpleViewManager（Android）。
2. 使用 RCT_EXPORT_MODULE() 宏（iOS）或 @ReactModule 注解（Android）将视图管理器暴露给 JavaScript。
3. 在 JavaScript 中使用 requireNativeComponent 函数来引用原生组件。

Event Emitters

Event Emitters 允许你从原生代码向 JavaScript 发送事件。你可以通过以下步骤实现事件发射：

1. 在原生代码中创建一个类，并实现 RCTEventEmitter 协议（iOS）或继承 ReactContextBaseJavaModule 并实现 getSupportedEvents 方法（Android）。
2. 使用 sendEventWithName 方法（iOS）或 emit 方法（Android）发送事件。
3. 在 JavaScript 中使用 NativeEventEmitter 类来监听事件。

本题详细解读

Native Modules 详细步骤

iOS

1. 创建原生模块：

   // www.javascriptcn.com code example
   #import <React/RCTBridgeModule.h>
   
   @interface MyNativeModule : NSObject <RCTBridgeModule>
   @end
   
   @implementation MyNativeModule
   
   RCT_EXPORT_MODULE();
   
   RCT_EXPORT_METHOD(sayHello:(NSString *)name) {
     NSLog(@"Hello, %@", name);
   }
   
   @end

2. 在 JavaScript 中调用：

   import { NativeModules } from 'react-native';
   
   const { MyNativeModule } = NativeModules;
   
   MyNativeModule.sayHello('World');

Android

1. 创建原生模块：

   // 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;
   
   public class MyNativeModule extends ReactContextBaseJavaModule {
     public MyNativeModule(ReactApplicationContext reactContext) {
       super(reactContext);
     }
   
     @Override
     public String getName() {
       return "MyNativeModule";
     }
   
     @ReactMethod
     public void sayHello(String name) {
       System.out.println("Hello, " + name);
     }
   }

2. 在 JavaScript 中调用：

   import { NativeModules } from 'react-native';
   
   const { MyNativeModule } = NativeModules;
   
   MyNativeModule.sayHello('World');

Native UI Components 详细步骤

iOS

1. 创建原生视图：

   // www.javascriptcn.com code example
   #import <React/RCTViewManager.h>
   
   @interface MyNativeViewManager : RCTViewManager
   @end
   
   @implementation MyNativeViewManager
   
   RCT_EXPORT_MODULE()
   
   - (UIView *)view {
     return [[UIView alloc] init];
   }
   
   @end

2. 在 JavaScript 中使用：

   import { requireNativeComponent } from 'react-native';
   
   const MyNativeView = requireNativeComponent('MyNativeView');
   
   const App = () => (
     <MyNativeView style={{ width: 100, height: 100 }} />
   );

Android

1. 创建原生视图：

   // www.javascriptcn.com code example
   package com.myapp;
   
   import android.view.View;
   import com.facebook.react.uimanager.SimpleViewManager;
   import com.facebook.react.uimanager.ThemedReactContext;
   
   public class MyNativeViewManager extends SimpleViewManager<View> {
     @Override
     public String getName() {
       return "MyNativeView";
     }
   
     @Override
     protected View createViewInstance(ThemedReactContext reactContext) {
       return new View(reactContext);
     }
   }

2. 在 JavaScript 中使用：

   import { requireNativeComponent } from 'react-native';
   
   const MyNativeView = requireNativeComponent('MyNativeView');
   
   const App = () => (
     <MyNativeView style={{ width: 100, height: 100 }} />
   );

Event Emitters 详细步骤

iOS

1. 创建事件发射器：

   // www.javascriptcn.com code example
   #import <React/RCTEventEmitter.h>
   #import <React/RCTBridgeModule.h>
   
   @interface MyEventEmitter : RCTEventEmitter <RCTBridgeModule>
   @end
   
   @implementation MyEventEmitter
   
   RCT_EXPORT_MODULE();
   
   - (NSArray<NSString *> *)supportedEvents {
     return @[@"MyEvent"];
   }
   
   - (void)sendEvent {
     [self sendEventWithName:@"MyEvent" body:@{@"message": @"Hello from Native"}];
   }
   
   @end

2. 在 JavaScript 中监听事件：

   import { NativeEventEmitter, NativeModules } from 'react-native';
   
   const { MyEventEmitter } = NativeModules;
   const eventEmitter = new NativeEventEmitter(MyEventEmitter);
   
   eventEmitter.addListener('MyEvent', (event) => {
     console.log(event.message); // "Hello from Native"
   });

Android

1. 创建事件发射器：

   // 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 com.facebook.react.modules.core.DeviceEventManagerModule;
   import com.facebook.react.bridge.WritableMap;
   import com.facebook.react.bridge.Arguments;
   
   public class MyEventEmitter extends ReactContextBaseJavaModule {
     public MyEventEmitter(ReactApplicationContext reactContext) {
       super(reactContext);
     }
   
     @Override
     public String getName() {
       return "MyEventEmitter";
     }
   
     @ReactMethod
     public void sendEvent() {
       WritableMap params = Arguments.createMap();
       params.putString("message", "Hello from Native");
       getReactApplicationContext()
         .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
         .emit("MyEvent", params);
     }
   }

2. 在 JavaScript 中监听事件：

   import { NativeEventEmitter, NativeModules } from 'react-native';
   
   const { MyEventEmitter } = NativeModules;
   const eventEmitter = new NativeEventEmitter(MyEventEmitter);
   
   eventEmitter.addListener('MyEvent', (event) => {
     console.log(event.message); // "Hello from Native"
   });