如何使用React Native的NativeModules和NativeEventEmitter與原生代碼交互

要使用React Native的NativeModules和NativeEventEmitter與原生代碼交互，你可以按照以下步驟操作：

1. 創建一個原生模塊：

首先在你的原生代碼中創建一個模塊，這個模塊負責處理React Native的調用，并且提供需要的功能。

例如，在iOS中，你可以創建一個名為CustomModule的類，實現RCTBridgeModule協議，并在其中定義需要暴露給React Native的方法。

// CustomModule.h
#import <React/RCTBridgeModule.h>

@interface CustomModule : NSObject <RCTBridgeModule>

@end

// CustomModule.m
#import "CustomModule.h"

@implementation CustomModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(doSomething:(NSString *)param) {
  // 做一些原生操作
}

@end

2. 在React Native代碼中調用原生模塊：

在你的React Native代碼中，通過NativeModules模塊引入原生模塊，并調用其中暴露的方法。

import { NativeModules } from 'react-native';

const { CustomModule } = NativeModules;

CustomModule.doSomething('param');

3. 創建一個原生事件監聽器：

如果你需要在React Native中監聽原生代碼中的事件，可以使用NativeEventEmitter來實現。

在原生代碼中，創建一個事件發射器，并在適當的時機觸發事件。

// CustomEventEmitter.h
#import <React/RCTEventEmitter.h>

@interface CustomEventEmitter : RCTEventEmitter

+ (void)emitEventWithName:(NSString *)name andPayload:(NSDictionary *)payload;

@end

// CustomEventEmitter.m
#import "CustomEventEmitter.h"

@implementation CustomEventEmitter

RCT_EXPORT_MODULE();

+ (void)emitEventWithName:(NSString *)name andPayload:(NSDictionary *)payload {
  [[NSNotificationCenter defaultCenter] postNotificationName:name object:nil userInfo:payload];
}

- (NSArray<NSString *> *)supportedEvents {
  return @[ @"eventName" ];
}

@end

4. 在React Native代碼中監聽原生事件：

在React Native代碼中，通過NativeEventEmitter監聽原生代碼中發出的事件。

import { NativeEventEmitter } from 'react-native';

const eventEmitter = new NativeEventEmitter(CustomEventEmitter);

const subscription = eventEmitter.addListener('eventName', (event) => {
  console.log('Received event:', event);
});

// 在組件卸載時取消監聽
subscription.remove();

通過以上步驟，你就可以實現React Native與原生代碼之間的交互。你可以根據自己的需求，擴展和定制原生模塊和事件來滿足功能需求。