ReactNative进阶（五十六）：跨平台通信实战——从Callback到EventEmitter

1. 跨平台通信的演进之路

在React Native开发中，与原生平台的通信能力就像一座桥梁，连接着JavaScript世界和原生操作系统。这座桥梁从最初的简单木板（Callback）逐渐升级为钢结构（Promise），最终演变为双向八车道的高速公路（EventEmitter）。我经历过一个电商项目，当时需要在RN页面实时接收原生推送的订单状态变更，最初用Callback实现时各种回调地狱，后来重构为EventEmitter方案后代码简洁度提升了70%。

跨平台通信本质上要解决三个核心问题：调用方向（RN调原生还是原生调RN）、数据格式（如何序列化复杂对象）、线程模型（UI线程与JS线程的交互）。Android和iOS在实现细节上各有特点：

• Android通过ReactContextBaseJavaModule暴露方法
• iOS则需要遵循RCTBridgeModule协议
  但底层都依赖Bridge机制，就像快递员在两个城市间运送包裹

2. Callback模式：最基础的通信方式

2.1 基础实现原理

Callback就像打电话留言，RN把要说的话和回拨号码（回调函数）一起传给原生端。下面是一个获取设备信息的典型实现：

java复制// Android原生代码
@ReactMethod
public void getDeviceInfo(Callback errorCallback, Callback successCallback) {
    try {
        WritableMap info = Arguments.createMap();
        info.putString("model", Build.MODEL);
        info.putInt("apiLevel", Build.VERSION.SDK_INT);
        successCallback.invoke(info);
    } catch (Exception e) {
        errorCallback.invoke(e.getMessage());
    }
}

对应的RN调用代码需要注意this绑定问题：

javascript复制import { NativeModules } from 'react-native';

const handleGetInfo = () => {
  NativeModules.DeviceModule.getDeviceInfo(
    error => console.error(error),
    info => setDeviceInfo(info)
  );
};

2.2 实战中的坑与解决方案

我在金融项目中遇到过典型问题：回调丢失。当RN组件卸载后回调函数仍然被原生模块持有，导致内存泄漏。解决方案是在componentWillUnmount中取消回调：

javascript复制componentWillUnmount() {
  if(this.callbackId) {
    NativeModules.DeviceModule.cancelCallback(this.callbackId);
  }
}

另一个常见问题是线程跳跃。Android原生模块默认不在UI线程执行，如果要做UI操作需要这样处理：

java复制@ReactMethod
public void showToast(final String message) {
    getCurrentActivity().runOnUiThread(() -> 
        Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show()
    );
}

3. Promise方案：更优雅的异步处理

3.1 Promise工作流程

Promise把回调的嵌套结构拉平，就像把杂乱的电线整理成整齐的线缆。改造前面的设备信息获取示例：

java复制@ReactMethod
public void getDeviceInfoPromise(Promise promise) {
    try {
        WritableMap info = Arguments.createMap();
        info.putString("os", "Android");
        promise.resolve(info);
    } catch (Exception e) {
        promise.reject("GET_DEVICE_FAILED", e);
    }
}

RN侧使用async/await语法更加清晰：

javascript复制const fetchDeviceInfo = async () => {
  try {
    const info = await NativeModules.DeviceModule.getDeviceInfoPromise();
    setDeviceInfo(info);
  } catch (e) {
    Alert.alert('Error', e.message);
  }
};

3.2 复杂场景下的应用

对于需要连续调用多个原生方法的场景，Promise链展现出巨大优势。比如先获取位置再查询天气：

javascript复制const fetchWeather = async () => {
  const location = await NativeModules.GeoModule.getCurrentLocation();
  return await NativeModules.WeatherModule.query(location);
};

在iOS端需要注意线程安全，Promise回调可能在任意线程触发：

objectivec复制RCT_EXPORT_METHOD(fetchData:(RCTPromiseResolveBlock)resolve 
                 rejecter:(RCTPromiseRejectBlock)reject)
{
    dispatch_async(dispatch_get_main_queue(), ^{
        // 主线程安全操作
        NSData *result = [self loadDataSafely];
        resolve(result);
    });
}

4. EventEmitter：双向通信的终极方案

4.1 事件驱动架构实现

EventEmitter就像安装了对讲机，双方可以随时主动通信。Android端需要继承ReactContextBaseJavaModule并实现事件发送：

java复制public class EventEmitterModule extends ReactContextBaseJavaModule {
    public void sendEvent(String eventName, WritableMap params) {
        getReactApplicationContext()
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);
    }
}

iOS端则需要继承RCTEventEmitter：

objectivec复制@implementation EventEmitter
RCT_EXPORT_MODULE();

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

- (void)sendScanResult:(NSString *)result {
  [self sendEventWithName:@"ScanResult" body:@{@"result": result}];
}
@end

4.2 全双工通信实战

在蓝牙开发中，我们需要同时处理设备扫描和连接状态：

javascript复制const eventEmitter = new NativeEventEmitter(NativeModules.BluetoothManager);

useEffect(() => {
  const scanSubscription = eventEmitter.addListener(
    'ScanResult',
    device => updateDeviceList(device)
  );
  
  const connectSubscription = eventEmitter.addListener(
    'ConnectionState',
    state => updateConnection(state)
  );

  return () => {
    scanSubscription.remove();
    connectSubscription.remove();
  };
}, []);

4.3 性能优化技巧

高频事件（如传感器数据）需要特殊处理：

1. 防抖处理：原生端控制发送频率

java复制private long lastEmitTime;
public void onSensorChanged(SensorEvent event) {
    long now = System.currentTimeMillis();
    if(now - lastEmitTime > 100) { // 每秒最多10次
        sendEvent("SensorData", convertToMap(event));
        lastEmitTime = now;
    }
}

2. 批量传输：合并多个数据点一次发送
3. 共享内存：对于超大数组考虑使用NativeArray

5. 通信模式选型指南

5.1 决策矩阵对比

5.2 复杂业务场景实践

在直播应用中，我们这样设计通信架构：

• 礼物打赏：用Promise保证支付结果准确回传
• 弹幕消息：采用EventEmitter实现实时广播
• 房间状态：组合使用Promise获取初始状态+EventEmitter监听变更

javascript复制// 直播房间状态管理
class RoomManager {
  constructor() {
    this.emitter = new NativeEventEmitter(NativeModules.RoomBridge);
  }

  async enterRoom(roomId) {
    const initState = await NativeModules.RoomBridge.enter(roomId);
    this.subscription = this.emitter.addListener(
      'RoomStateChange',
      this.handleStateChange
    );
    return initState;
  }

  leaveRoom() {
    this.subscription?.remove();
    NativeModules.RoomBridge.leave();
  }
}

5.3 调试与性能监控

推荐使用自定义Bridge代理来监控通信：

java复制public class DebugBridgeDelegate implements ReactBridgeDelegate {
    @Override
    public void callJSFunction(
        String moduleName, 
        String functionName,
        NativeArray arguments
    ) {
        Log.d("Bridge", "Calling JS: "+moduleName+"."+functionName);
        // 原始调用逻辑
    }
}

在RN端可以包装NativeModules：

javascript复制const originalModule = NativeModules.RealModule;
const debugModule = new Proxy(originalModule, {
  get(target, prop) {
    console.log(`Calling native method: ${prop}`);
    return target[prop];
  }
});