React Native混合开发：原生模块集成与性能优化实战-代码聚汇网

React Native混合开发：原生模块集成与性能优化实战

AngstEssenSeele

1. React Native混合开发的核心价值

在移动应用开发领域，跨平台框架与原生能力的结合已经成为提升开发效率同时保证性能体验的黄金组合。React Native作为Facebook推出的跨平台解决方案，通过JavaScript核心实现了"一次编写，多处运行"的愿景。但真正让这个框架在商业项目中经得起考验的，是其开放的原生模块集成能力。

我经历过三个大型项目从纯原生转向RN混合开发的完整周期，最深刻的体会是：当业务需要复杂动画、硬件调用或深度系统集成时，原生模块就像给RN插上了翅膀。比如在智能家居控制App中，通过原生模块集成蓝牙Mesh协议栈；在电商App中实现高性能的AR试穿功能；在金融App中处理敏感的生物识别验证——这些场景都离不开原生模块的支持。

2. Android原生模块集成实战

2.1 环境准备与项目配置

在Android Studio中新建一个ReactNativeHybrid项目后，需要特别注意Gradle的版本兼容问题。最近在Android Studio Giraffe版本中，经常遇到SDK version issue的报错。解决方案是在android/gradle.properties中添加：

gradle复制android.jetifier.blacklist=react-native
android.enableJetifier=false

对于Windows开发者遇到的filename longer than 260 characters问题，可以通过在项目根目录创建metro.config.js并添加以下内容解决：

javascript复制module.exports = {
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx'],
    extraNodeModules: new Proxy({}, {
      get: (target, name) => path.join(process.cwd(), `node_modules/${name}`)
    })
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

2.2 原生模块开发关键步骤

创建一个基础的蓝牙控制模块为例，我们需要：

在android/app/src/main/java/com/yourpackage下新建BluetoothControlModule.java：

java复制public class BluetoothControlModule extends ReactContextBaseJavaModule {
    private final ReactApplicationContext reactContext;

    public BluetoothControlModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    @Override
    public String getName() {
        return "BluetoothControl";
    }

    @ReactMethod
    public void enableBluetooth(Promise promise) {
        BluetoothAdapter bluetoothAdapter = BluetoothAdapter.getDefaultAdapter();
        if (bluetoothAdapter == null) {
            promise.reject("BLUETOOTH_NOT_SUPPORTED", "Device doesn't support Bluetooth");
        } else {
            if (!bluetoothAdapter.isEnabled()) {
                bluetoothAdapter.enable();
            }
            promise.resolve(true);
        }
    }
}

创建对应的Package类：

java复制public class BluetoothControlPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new BluetoothControlModule(reactContext));
        return modules;
    }

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

在MainApplication.java的getPackages方法中添加：

java复制@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new BluetoothControlPackage());
    return packages;
}

2.3 性能优化实战技巧

在实现视频处理模块时，我们发现直接传递大尺寸位图会导致严重的内存问题。解决方案是：

使用WritableNativeMap传递结构化数据
对于图像处理，先在原生层保存为临时文件再传递文件路径
实现DoNotStrip注解防止ProGuard混淆关键方法

java复制@DoNotStrip
public class ImageProcessorModule extends ReactContextBaseJavaModule {
    @ReactMethod
    public void processImage(String uri, ReadableMap options, Promise promise) {
        try {
            // 使用Glide加载图片避免OOM
            Bitmap bitmap = Glide.with(getReactApplicationContext())
                .asBitmap()
                .load(uri)
                .submit()
                .get();
            
            // 处理逻辑...
            
            // 保存到缓存目录
            File outputFile = createTempFile();
            bitmap.compress(Bitmap.CompressFormat.JPEG, 90, new FileOutputStream(outputFile));
            
            WritableMap result = new WritableNativeMap();
            result.putString("path", outputFile.getAbsolutePath());
            promise.resolve(result);
        } catch (Exception e) {
            promise.reject("IMAGE_PROCESS_FAILED", e);
        }
    }
}

3. iOS原生模块深度集成

3.1 环境配置常见陷阱

在Xcode中集成RN模块时，validation failed sdk version issue是最常见的错误之一。解决方法是在Podfile中明确指定iOS部署目标：

ruby复制platform :ios, '13.0' # 根据项目需求调整

target 'YourApp' do
  use_frameworks!
  pod 'React', :path => '../node_modules/react-native'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  # 其他依赖...
end

对于No iOS devices available in simulator.app错误，需要：

检查Xcode命令行工具是否安装：xcode-select --install
重置模拟器列表：xcrun simctl list devices
确保node_modules/react-native/scripts/下的脚本有执行权限

3.2 Objective-C与Swift混编实践

创建一个地理位置监控模块的示例：

新建LocationMonitor.h头文件：

objc复制#import <React/RCTBridgeModule.h>
#import <CoreLocation/CoreLocation.h>

@interface LocationMonitor : NSObject <RCTBridgeModule, CLLocationManagerDelegate>
@property (nonatomic, strong) CLLocationManager *locationManager;
@end

实现文件LocationMonitor.m：

objc复制#import "LocationMonitor.h"

@implementation LocationMonitor

RCT_EXPORT_MODULE();

- (instancetype)init {
    self = [super init];
    if (self) {
        _locationManager = [[CLLocationManager alloc] init];
        _locationManager.delegate = self;
        _locationManager.desiredAccuracy = kCLLocationAccuracyBest;
    }
    return self;
}

RCT_EXPORT_METHOD(startMonitoring:(NSString *)identifier 
                  resolver:(RCTPromiseResolveBlock)resolve 
                  rejecter:(RCTPromiseRejectBlock)reject) {
    if ([CLLocationManager authorizationStatus] == kCLAuthorizationStatusNotDetermined) {
        [self.locationManager requestAlwaysAuthorization];
    }
    // 启动监控逻辑...
    resolve(@(YES));
}

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

- (void)locationManager:(CLLocationManager *)manager 
     didUpdateLocations:(NSArray<CLLocation *> *)locations {
    CLLocation *location = [locations lastObject];
    [self sendEventWithName:@"LocationUpdated" 
                       body:@{
                           @"latitude": @(location.coordinate.latitude),
                           @"longitude": @(location.coordinate.longitude),
                           @"accuracy": @(location.horizontalAccuracy)
                       }];
}

@end

对于Swift实现，需要特别注意桥接文件的配置：

创建RNBridgeModule.swift：

swift复制import Foundation
import React

@objc(RNBridgeModule)
class RNBridgeModule: NSObject {
    @objc static func requiresMainQueueSetup() -> Bool {
        return true
    }
    
    @objc func showAlert(_ message: String) {
        DispatchQueue.main.async {
            let alert = UIAlertController(title: "From Native", 
                                        message: message, 
                                        preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "OK", style: .default))
            UIApplication.shared.keyWindow?.rootViewController?
                .present(alert, animated: true)
        }
    }
}

在桥接文件中暴露接口：

objc复制// RNBridgeModule-Bridging-Header.h
#import <React/RCTBridgeModule.h>

3.3 原生UI组件封装技巧

封装一个自定义地图视图的完整流程：

创建视图管理器RNMapViewManager.h：

objc复制#import <React/RCTViewManager.h>
#import <MapKit/MapKit.h>

@interface RNMapViewManager : RCTViewManager
@end

实现文件RNMapViewManager.m：

objc复制#import "RNMapViewManager.h"
#import "RNMapView.h"

@implementation RNMapViewManager

RCT_EXPORT_MODULE(RNMapView)

- (UIView *)view {
    return [[RNMapView alloc] init];
}

RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTDirectEventBlock)

@end

自定义视图RNMapView.h：

objc复制#import <MapKit/MapKit.h>
#import <React/RCTComponent.h>

@interface RNMapView : MKMapView
@property (nonatomic, copy) RCTDirectEventBlock onRegionChange;
@end

实现文件RNMapView.m：

objc复制#import "RNMapView.h"

@implementation RNMapView {
    BOOL _hasSetRegion;
}

- (instancetype)init {
    self = [super init];
    if (self) {
        self.delegate = self;
    }
    return self;
}

- (void)mapView:(MKMapView *)mapView 
    regionDidChangeAnimated:(BOOL)animated {
    if (!_hasSetRegion && self.onRegionChange) {
        _hasSetRegion = YES;
        return;
    }
    
    if (self.onRegionChange) {
        MKCoordinateRegion region = mapView.region;
        self.onRegionChange(@{
            @"latitude": @(region.center.latitude),
            @"longitude": @(region.center.longitude),
            @"latitudeDelta": @(region.span.latitudeDelta),
            @"longitudeDelta": @(region.span.longitudeDelta),
        });
    }
}

@end

4. 双平台统一接口设计

4.1 JavaScript桥接层最佳实践

创建一个跨平台的传感器模块接口：

typescript复制// NativeSensors.ts
type SensorType = 'accelerometer' | 'gyroscope' | 'magnetometer';

interface SensorConfig {
  interval?: number;
  platformSpecific?: {
    ios?: {
      allowsBackgroundUpdates?: boolean;
    };
    android?: {
      wakeLock?: boolean;
    };
  };
}

class NativeSensors {
  private static instance: NativeSensors;
  private sensorListeners: Map<string, (data: any) => void> = new Map();

  private constructor() {
    if (Platform.OS === 'ios') {
      NativeEventEmitter.addListener('SensorData', this.handleSensorData);
    } else {
      DeviceEventEmitter.addListener('SensorData', this.handleSensorData);
    }
  }

  static getInstance(): NativeSensors {
    if (!NativeSensors.instance) {
      NativeSensors.instance = new NativeSensors();
    }
    return NativeSensors.instance;
  }

  private handleSensorData = (event: any) => {
    const listener = this.sensorListeners.get(event.sensorType);
    if (listener) {
      listener(event.data);
    }
  };

  startListening(
    sensorType: SensorType,
    callback: (data: any) => void,
    config?: SensorConfig
  ): string {
    const listenerId = uuidv4();
    this.sensorListeners.set(listenerId, callback);

    if (Platform.OS === 'ios') {
      NativeModules.SensorManager.startSensorUpdates(
        sensorType,
        config?.interval || 100,
        config?.platformSpecific?.ios || {}
      );
    } else {
      NativeModules.SensorModule.startListening(
        sensorType,
        config?.interval || 100,
        config?.platformSpecific?.android || {}
      );
    }

    return listenerId;
  }

  stopListening(listenerId: string) {
    this.sensorListeners.delete(listenerId);
    if (this.sensorListeners.size === 0) {
      if (Platform.OS === 'ios') {
        NativeModules.SensorManager.stopAllSensors();
      } else {
        NativeModules.SensorModule.stopAllListeners();
      }
    }
  }
}

export const sensorService = NativeSensors.getInstance();

4.2 平台特定代码组织策略

推荐的项目结构：

code复制src/
├── native/
│   ├── common/          # 跨平台通用类型定义
│   ├── android/         # Android特定实现
│   │   ├── modules/
│   │   ├── components/
│   │   └── utils/
│   └── ios/            # iOS特定实现
│       ├── modules/
│       ├── components/
│       └── utils/
├── bridges/            # JavaScript桥接层
└── hooks/              # 自定义Hook封装

在metro.config.js中配置解析别名：

javascript复制const path = require('path');

module.exports = {
  resolver: {
    alias: {
      '@native': path.resolve(__dirname, 'src/native'),
      '@bridges': path.resolve(__dirname, 'src/bridges'),
    },
  },
};

4.3 调试与性能调优

内存泄漏检测：
- Android: 使用Android Profiler监控Native Heap
- iOS: 在Xcode中启用Zombie Objects和Malloc Stack
通信性能优化：
- 批量传输数据时使用NativeEventEmitter代替回调
- 对于高频更新数据，考虑共享内存方案

线程安全准则：

java复制@ReactMethod
public void performHeavyTask(final Promise promise) {
    new Thread(new Runnable() {
        @Override
        public void run() {
            try {
                // 耗时操作
                final String result = doHeavyWork();
                getReactApplicationContext()
                    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit("TaskCompleted", result);
                promise.resolve(result);
            } catch (Exception e) {
                promise.reject("TASK_FAILED", e);
            }
        }
    }).start();
}

跨平台日志系统：

objc复制// iOS端
#define RNLog(fmt, ...) RCTLogInfo(@"%@", [NSString stringWithFormat:fmt, ##__VA_ARGS__])

@implementation LoggerModule

RCT_EXPORT_METHOD(setLogLevel:(NSString *)level) {
    if ([level isEqualToString:@"debug"]) {
        RCTSetLogThreshold(RCTLogLevelTrace);
    } else {
        RCTSetLogThreshold(RCTLogLevelInfo);
    }
}

@end

java复制// Android端
public class LoggerModule extends ReactContextBaseJavaModule {
    private static final String TAG = "RNLogger";
    
    @ReactMethod
    public void log(String level, String message) {
        switch (level) {
            case "debug":
                Log.d(TAG, message);
                break;
            case "warn":
                Log.w(TAG, message);
                break;
            case "error":
                Log.e(TAG, message);
                break;
            default:
                Log.i(TAG, message);
        }
    }
}

5. 企业级应用实战经验

5.1 模块化架构设计

在大型项目中，推荐采用分层架构：

基础设施层：
- 网络通信
- 持久化存储
- 日志系统
领域服务层：
- 业务逻辑模块
- 数据转换器
表示层：
- React组件
- 导航逻辑

模块通信采用依赖注入：

typescript复制// di.ts
import {Platform} from 'react-native';
import {AndroidAuthService} from './native/android/AuthService';
import {IOSAuthService} from './native/ios/AuthService';

interface AuthService {
  login(username: string, password: string): Promise<string>;
  logout(): Promise<void>;
}

const authService: AuthService = Platform.select({
  android: new AndroidAuthService(),
  ios: new IOSAuthService(),
})!;

export const container = {
  authService,
};

5.2 自动化测试策略

原生模块单元测试（Android示例）：

java复制@RunWith(RobolectricTestRunner.class)
@Config(sdk = {Build.VERSION_CODES.P})
public class BluetoothControlModuleTest {
    private ReactApplicationContext reactContext;
    private BluetoothControlModule module;

    @Before
    public void setUp() {
        reactContext = new ReactApplicationContext(RuntimeEnvironment.application);
        module = new BluetoothControlModule(reactContext);
    }

    @Test
    public void testBluetoothEnable() {
        PromiseMock promise = new PromiseMock();
        module.enableBluetooth(promise);
        assertTrue(promise.resolveValue);
    }
}

JavaScript接口测试：

javascript复制describe('SensorService', () => {
  let sensorService;
  const mockData = { x: 0.1, y: 0.2, z: 0.3 };

  beforeAll(() => {
    jest.mock('react-native', () => ({
      NativeModules: {
        SensorModule: {
          startListening: jest.fn(),
          stopAllListeners: jest.fn(),
        },
      },
      Platform: { OS: 'android' },
    }));
    sensorService = require('./NativeSensors').sensorService;
  });

  it('should handle sensor data', () => {
    const callback = jest.fn();
    const listenerId = sensorService.startListening('accelerometer', callback);
    
    DeviceEventEmitter.emit('SensorData', {
      sensorType: 'accelerometer',
      data: mockData,
    });

    expect(callback).toHaveBeenCalledWith(mockData);
    sensorService.stopListening(listenerId);
  });
});

5.3 持续集成方案

Android构建配置：

gradle复制android {
    compileSdkVersion 33
    
    defaultConfig {
        ndk {
            abiFilters "armeabi-v7a", "arm64-v8a", "x86", "x86_64"
        }
    }
    
    signingConfigs {
        release {
            storeFile file(System.getenv("KEYSTORE_PATH") ?: "release.keystore")
            storePassword System.getenv("KEYSTORE_PASSWORD")
            keyAlias System.getenv("KEY_ALIAS")
            keyPassword System.getenv("KEY_PASSWORD")
        }
    }
    
    buildTypes {
        release {
            signingConfig signingConfigs.release
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

iOS Fastlane配置：

ruby复制lane :build_ios do
  setup_ci
  increment_build_number(
    build_number: ENV["BUILD_NUMBER"]
  )
  
  match(
    type: "appstore",
    readonly: true
  )
  
  build_app(
    scheme: "YourApp",
    workspace: "ios/YourApp.xcworkspace",
    export_method: "app-store",
    configuration: "Release"
  )
  
  upload_to_testflight
end

React Native版本升级策略：
- 使用rn-diff-purge比较版本差异
- 分阶段升级：先更新React Native，再处理原生依赖
- 建立版本回滚机制

6. 疑难问题解决方案

6.1 原生依赖冲突处理

当第三方SDK与React Native发生冲突时：

Android解决方案：

gradle复制configurations.all {
    resolutionStrategy {
        force 'com.facebook.react:react-native:0.71.0' // 指定RN版本
        exclude group: 'com.squareup.okhttp3', module: 'okhttp' // 排除冲突库
    }
}

iOS解决方案：

ruby复制post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'React-Core'
      target.build_configurations.each do |config|
        config.build_settings['OTHER_CFLAGS'] = '-DFOLLY_NO_CONFIG'
      end
    end
    
    # 解决Firebase冲突
    if target.name == 'FirebaseCore'
      target.build_configurations.each do |config|
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] << 'FIRBATCH_UPLOADS_ENABLED=0'
      end
    end
  end
end

6.2 原生与JavaScript类型转换

复杂数据类型处理方案：

Android端：

java复制@ReactMethod
public void getDeviceInfo(Promise promise) {
    try {
        WritableMap result = Arguments.createMap();
        WritableArray cpuCores = Arguments.createArray();
        
        for (int i = 0; i < Runtime.getRuntime().availableProcessors(); i++) {
            cpuCores.pushInt(i + 1);
        }
        
        result.putArray("cpuCores", cpuCores);
        result.putString("model", Build.MODEL);
        result.putDouble("memory", getTotalMemory());
        
        promise.resolve(result);
    } catch (Exception e) {
        promise.reject("GET_DEVICE_INFO_FAILED", e);
    }
}

iOS端：

objc复制RCT_EXPORT_METHOD(getDeviceInfo:(RCTPromiseResolveBlock)resolve
                rejecter:(RCTPromiseRejectBlock)reject) {
    NSMutableDictionary *result = [NSMutableDictionary new];
    result[@"model"] = [[UIDevice currentDevice] model];
    result[@"systemVersion"] = [[UIDevice currentDevice] systemVersion];
    
    // 获取CPU核心数
    NSProcessInfo *processInfo = [NSProcessInfo processInfo];
    result[@"cpuCores"] = @([processInfo processorCount]);
    
    // 内存信息
    [result addEntriesFromDictionary:[self getMemoryInfo]];
    
    resolve(result);
}

6.3 热更新与原生模块兼容

实现方案：

版本约束声明：

javascript复制// native-module-version.js
export const NativeModuleVersion = {
    BluetoothControl: 2,
    LocationMonitor: 3,
    // 其他模块...
};

更新检查机制：

typescript复制async function checkNativeCompatibility() {
    const appVersion = DeviceInfo.getVersion();
    const nativeVersions = await NativeModules.VersionChecker.getVersions();
    
    for (const [moduleName, expectedVersion] of Object.entries(NativeModuleVersion)) {
        if (nativeVersions[moduleName] < expectedVersion) {
            throw new Error(
                `Native module ${moduleName} version mismatch. ` +
                `Expected >= ${expectedVersion}, got ${nativeVersions[moduleName]}. ` +
                `Please update the app.`
            );
        }
    }
}

降级处理策略：

java复制public class BluetoothControlModule extends ReactContextBaseJavaModule {
    @Override
    public Map<String, Object> getConstants() {
        return MapBuilder.of(
            "VERSION", 2,
            "MIN_JS_VERSION", 1
        );
    }
    
    @ReactMethod
    public void enableBluetooth(Promise promise) {
        if (getReactApplicationContext().getNativeModule(VersionChecker.class)
            .getJsVersion() < getConstants().get("MIN_JS_VERSION")) {
            promise.reject("VERSION_MISMATCH", "JS bundle version too old");
            return;
        }
        // 正常逻辑...
    }
}

7. 前沿技术融合实践

7.1 与新架构（Fabric）的兼容

TurboModule适配：

objc复制// RCTBluetoothControlModule.h
#import <React/RCTBridgeModule.h>
#import <ReactCommon/RCTTurboModule.h>

@interface RCTBluetoothControlModule : NSObject <RCTBridgeModule, RCTTurboModule>
@end

// RCTBluetoothControlModule.m
@implementation RCTBluetoothControlModule

RCT_EXPORT_MODULE()

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params {
    return std::make_shared<facebook::react::NativeBluetoothControlSpecJSI>(params);
}

@end

C++统一接口：

cpp复制// NativeBluetoothControlSpec.h
#include <ReactCommon/TurboModule.h>
#include <react/bridging/Bridging.h>

namespace facebook::react {

class NativeBluetoothControlSpecJSI : public TurboModule {
 public:
  NativeBluetoothControlSpecJSI(std::shared_ptr<CallInvoker> jsInvoker);

  virtual void enableBluetooth(
      jsi::Runtime &rt,
      Promise promise) = 0;
};

} // namespace facebook::react

7.2 原生线程模型优化

Android线程池管理：

java复制public class ThreadPoolModule extends ReactContextBaseJavaModule {
    private ExecutorService boundedThreadPool = Executors.newFixedThreadPool(
        Runtime.getRuntime().availableProcessors()
    );
    
    @ReactMethod
    public void submitTask(final String taskId, final ReadableMap config, final Promise promise) {
        boundedThreadPool.submit(() -> {
            try {
                Object result = processTask(taskId, config);
                getReactApplicationContext()
                    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit("TaskProgress", MapBuilder.of("taskId", taskId, "status", "completed"));
                promise.resolve(result);
            } catch (Exception e) {
                promise.reject("TASK_FAILED", e);
            }
        });
    }
}

iOS GCD高级用法：

objc复制@implementation ImageProcessorModule {
    dispatch_queue_t _processingQueue;
    dispatch_group_t _uploadGroup;
}

- (instancetype)init {
    self = [super init];
    if (self) {
        _processingQueue = dispatch_queue_create("com.yourapp.imageprocessor", DISPATCH_QUEUE_CONCURRENT);
        _uploadGroup = dispatch_group_create();
    }
    return self;
}

RCT_EXPORT_METHOD(processImages:(NSArray<NSString *> *)imageUrls
                resolver:(RCTPromiseResolveBlock)resolve
                rejecter:(RCTPromiseRejectBlock)reject) {
    NSMutableArray *results = [NSMutableArray new];
    
    for (NSString *url in imageUrls) {
        dispatch_group_enter(_uploadGroup);
        dispatch_async(_processingQueue, ^{
            @autoreleasepool {
                UIImage *image = [self loadImageFromUrl:url];
                UIImage *processed = [self applyFilters:image];
                NSString *path = [self saveImage:processed];
                
                @synchronized (results) {
                    [results addObject:path];
                }
                dispatch_group_leave(_uploadGroup);
            }
        });
    }
    
    dispatch_group_notify(_uploadGroup, dispatch_get_main_queue(), ^{
        resolve(results);
    });
}
@end

7.3 跨平台组件库设计

统一Prop类型定义：

typescript复制type NativeViewProps = {
  style?: ViewStyle;
  enabled?: boolean;
  onPress?: (event: NativeSyntheticEvent<{x: number; y: number}>) => void;
  // 平台特定属性
  ios?: {
    cornerRadius?: number;
    blurEffect?: 'light' | 'dark';
  };
  android?: {
    elevation?: number;
    rippleColor?: string;
  };
};

平台组件封装：

javascript复制const NativeCustomView = Platform.select({
  ios: require('./NativeCustomViewIOS').default,
  android: require('./NativeCustomViewAndroid').default,
});

export function CustomView(props: NativeViewProps) {
  const onPress = useCallback((event) => {
    props.onPress?.(event.nativeEvent);
  }, [props.onPress]);
  
  return <NativeCustomView {...props} onPress={onPress} />;
}

Android实现示例：

java复制public class CustomViewManager extends SimpleViewManager<CustomView> {
    @Override
    public String getName() {
        return "CustomViewAndroid";
    }
    
    @Override
    protected CustomView createViewInstance(ThemedReactContext context) {
        return new CustomView(context);
    }
    
    @ReactProp(name = "rippleColor")
    public void setRippleColor(CustomView view, @Nullable String colorStr) {
        if (colorStr != null) {
            view.setRippleColor(Color.parseColor(colorStr));
        }
    }
}

iOS实现示例：

swift复制@objc(CustomViewManager)
class CustomViewManager: RCTViewManager {
    override func view() -> UIView! {
        return CustomView()
    }
    
    @objc func setBlurEffect(_ view: CustomView, effect: String) {
        let blurEffect: UIBlurEffect?
        switch effect {
        case "light": blurEffect = UIBlurEffect(style: .light)
        case "dark": blurEffect = UIBlurEffect(style: .dark)
        default: blurEffect = nil
        }
        view.blurView.effect = blurEffect
    }
}