React Native 混合开发：原生模块与性能监控

一、原生模块开发

原生模块允许在 React Native 中调用平台原生（Android/iOS）功能，适用于高性能计算、硬件访问等场景。

核心步骤：

1. Android 实现（Java/Kotlin）
   创建继承 ReactContextBaseJavaModule 的类：

   public class DeviceModule extends ReactContextBaseJavaModule {
       @Override
       public String getName() { return "DeviceModule"; }
   
       @ReactMethod
       public void getBatteryLevel(Promise promise) {
           try {
               Intent batteryIntent = getReactApplicationContext()
                   .registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
               int level = batteryIntent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);
               promise.resolve(level);
           } catch (Exception e) { promise.reject("ERROR", e); }
       }
   }
   

2. iOS 实现（Objective-C/Swift）
   创建继承 RCTBridgeModule 的类：

   #import <React/RCTBridgeModule.h>
   @interface DeviceModule : NSObject <RCTBridgeModule>
   @end
   
   @implementation DeviceModule
   RCT_EXPORT_MODULE();
   RCT_EXPORT_METHOD(getBatteryLevel:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
       float level = [[UIDevice currentDevice] batteryLevel];
       if (level < 0) { reject(@"ERROR", @"Battery level unavailable", nil); }
       else { resolve(@(level * 100)); }
   }
   @end
   

3. JS 层调用
   通过 NativeModules 访问：

   import { NativeModules } from 'react-native';
   const { DeviceModule } = NativeModules;
   
   const fetchBattery = async () => {
     try {
       const level = await DeviceModule.getBatteryLevel();
       console.log(`Battery: ${level}%`);
     } catch (e) { console.error(e); }
   };
   

关键注意：

• 线程管理：耗时操作需在子线程执行（Android 用 AsyncTask，iOS 用 dispatch_async）
• 数据类型映射：复杂数据需通过 WritableMap（Android）/NSDictionary（iOS）传递
• 模块注册：确保在 Package 类（Android）或 RCT_EXPORT_MODULE（iOS）正确注册

二、性能监控方案

混合开发中需监控 JS 与原生交互的性能瓶颈。

1. 内置工具

• React DevTools：分析组件渲染性能
• Flipper：监控网络请求、日志及性能指标

  npx react-native-flipper
  

2. 自定义监控

• JS-Native 通信耗时
  在原生模块中添加时间戳：

  // Android 示例
  @ReactMethod
  public void measureTime(Promise promise) {
      long startTime = System.currentTimeMillis();
      // ...执行操作...
      long duration = System.currentTimeMillis() - startTime;
      promise.resolve(duration);
  }
  

• 帧率监控
  使用 Performance Monitor（开发模式下摇动设备启用）

3. 第三方服务

• React Native Performance：

  npm install @shopify/react-native-performance
  

  监控启动时间、导航延迟：

  import { Performance } from '@shopify/react-native-performance';
  Performance.start('HomeScreenRender');
  // ...渲染完成...
  Performance.stop('HomeScreenRender');
  

• Firebase Performance Monitoring：
  集成原生 SDK 上报关键指标

三、优化建议

1. 减少 JS-Native 调用：批量传递数据，避免频繁跨桥通信
2. 原生线程优化：
   • Android 使用 @ReactMethod(isBlockingSynchronousMethod = true) 同步方法（谨慎使用）
   • iOS 用 dispatch_queue_t 指定低优先级队列
3. 内存管理：
   Android 实现 onCatalystInstanceDestroy 释放资源，iOS 监听 RCTBridge 卸载事件
4. 预加载原生模块：在应用启动时初始化高频模块

通过结合原生模块能力与精细性能监控，可显著提升混合应用流畅度。建议在开发阶段持续使用 console.profile() 和原生性能分析工具（Android Profiler/Xcode Instruments）定位瓶颈。