Objective-C与React Native模块通信实践

一、背景与概述

在移动应用开发领域，Objective - C 作为 iOS 开发的传统编程语言，拥有强大的原生能力。而 React Native 则凭借其跨平台特性和高效开发流程，受到广大开发者的青睐。当我们在 React Native 项目中需要利用 Objective - C 的某些特定原生功能时，就需要实现两者之间的模块通信。这种通信机制允许 React Native 调用 Objective - C 编写的模块，同时 Objective - C 也能将信息反馈给 React Native，从而充分发挥两者的优势。

二、React Native 架构基础

2.1 React Native 运行原理

React Native 采用 JavaScript 作为主要开发语言，通过 React 框架构建用户界面。它利用了 React 的虚拟 DOM 机制，将 JavaScript 代码转换为原生视图。在 iOS 端，React Native 运行在 JavaScriptCore 环境中，JavaScript 代码通过桥接层（Bridge）与原生代码进行通信。

2.2 桥接层（Bridge）

桥接层是 React Native 实现跨语言通信的核心组件。它负责在 JavaScript 和原生代码（如 Objective - C）之间传递消息。React Native 提供了一个名为 RCTBridge 的类来管理这个桥接过程。RCTBridge 建立了一个双向通道，使得 JavaScript 模块和原生模块能够相互调用对方暴露的方法。

三、Objective - C 模块创建

3.1 创建原生模块类

在 Xcode 项目中，创建一个继承自 RCTBridgeModule 的 Objective - C 类。例如，我们创建一个名为 MyNativeModule 的类：

#import <React/RCTBridgeModule.h>

@interface MyNativeModule : NSObject <RCTBridgeModule>

@end

@implementation MyNativeModule

RCT_EXPORT_MODULE()

@end

在上述代码中，RCT_EXPORT_MODULE() 宏用于将该类注册为 React Native 模块，这样在 React Native 中就可以通过模块名来访问这个 Objective - C 模块。

3.2 暴露方法给 React Native

在 MyNativeModule 类中，我们可以通过 RCT_EXPORT_METHOD 宏来暴露方法给 React Native。例如，我们暴露一个简单的加法方法：

#import <React/RCTBridgeModule.h>

@interface MyNativeModule : NSObject <RCTBridgeModule>

@end

@implementation MyNativeModule

RCT_EXPORT_MODULE()

RCT_EXPORT_METHOD(addNumbers:(nonnull NSNumber *)a and:(nonnull NSNumber *)b callback:(RCTResponseSenderBlock)callback) {
    NSNumber *result = @([a doubleValue] + [b doubleValue]);
    callback(@[result]);
}

@end

在这个方法中，addNumbers:and:callback: 接受两个 NSNumber 参数，并通过 RCTResponseSenderBlock 回调将计算结果返回给 React Native。

四、React Native 调用 Objective - C 模块

4.1 导入并使用模块

在 React Native 项目中，使用 NativeModules 来导入 Objective - C 模块。例如，在 JavaScript 代码中：

import { NativeModules } from'react - native';

const MyNativeModule = NativeModules.MyNativeModule;

MyNativeModule.addNumbers(2, 3, (result) => {
    console.log('The result is:', result);
});

这里，我们通过 NativeModules.MyNativeModule 获取到 Objective - C 模块实例，并调用其 addNumbers 方法，传入参数并在回调中获取计算结果。

4.2 传递复杂数据类型

除了基本数据类型，Objective - C 模块和 React Native 之间也可以传递复杂数据类型，如数组和字典。在 Objective - C 中：

RCT_EXPORT_METHOD(processArray:(NSArray *)array callback:(RCTResponseSenderBlock)callback) {
    NSMutableArray *newArray = [NSMutableArray array];
    for (id item in array) {
        if ([item isKindOfClass:[NSNumber class]]) {
            NSNumber *num = (NSNumber *)item;
            NSNumber *newNum = @([num doubleValue] * 2);
            [newArray addObject:newNum];
        }
    }
    callback(@[newArray]);
}

在 React Native 中调用：

MyNativeModule.processArray([1, 2, 3], (newArray) => {
    console.log('Processed array:', newArray);
});

这样就实现了数组类型数据在两者之间的传递和处理。

五、Objective - C 调用 React Native 模块

5.1 创建 React Native 模块供 Objective - C 调用

在 React Native 中创建一个模块供 Objective - C 调用。首先，使用 NativeModule 类创建模块，例如：

import { NativeModule, NativeModules, Platform } from'react - native';

class MyReactModule extends NativeModule {
    constructor() {
        super();
    }

    static get name() {
        return 'MyReactModule';
    }

    multiplyNumbers(a, b) {
        return a * b;
    }
}

export default MyReactModule;

5.2 在 Objective - C 中调用 React Native 模块

在 Objective - C 中，通过 RCTBridge 获取 React Native 模块实例并调用其方法。首先，获取 RCTBridge 实例，通常在 AppDelegate 中：

#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@interface AppDelegate ()

@property (nonatomic, strong) RCTBridge *bridge;

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
    //...
    return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
    #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
    #else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
    #endif
}

@end

然后，在需要调用 React Native 模块的地方：

#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTModuleData.h>

@implementation SomeViewController

- (void)callReactModule {
    AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
    RCTModuleData *moduleData = [appDelegate.bridge moduleForName:@"MyReactModule"];
    if (moduleData) {
        NSNumber *a = @2;
        NSNumber *b = @3;
        [moduleData invokeMethod:@"multiplyNumbers" withArguments:@[a, b] completion:^(id result) {
            NSLog(@"The result from React Native is: %@", result);
        }];
    }
}

@end

这样就实现了 Objective - C 调用 React Native 模块的功能。

六、事件传递（从 Objective - C 到 React Native）

6.1 注册事件

在 Objective - C 模块中，通过 RCT_EXPORT_MODULE 注册事件。例如，在 MyNativeModule 类中添加事件注册：

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

@interface MyNativeModule : RCTEventEmitter <RCTBridgeModule>

@end

@implementation MyNativeModule

RCT_EXPORT_MODULE()

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

@end

这里，supportedEvents 方法返回一个数组，包含要支持的事件名称。

6.2 发送事件

在 Objective - C 模块中，使用 sendEventWithName:body: 方法发送事件。例如，我们添加一个方法来模拟事件触发：

RCT_EXPORT_METHOD(triggerEvent) {
    NSDictionary *eventBody = @{@"message": @"This is a native event"};
    [self sendEventWithName:@"NativeEvent" body:eventBody];
}

6.3 监听事件

在 React Native 中，使用 DeviceEventEmitter 来监听事件。例如：

import { DeviceEventEmitter } from'react - native';

const subscription = DeviceEventEmitter.addListener('NativeEvent', (event) => {
    console.log('Received native event:', event);
});

// 取消监听
// subscription.remove();

这样就实现了从 Objective - C 到 React Native 的事件传递。

七、处理异步操作

7.1 Objective - C 异步方法

在 Objective - C 模块中，我们可以实现异步方法。例如，一个模拟网络请求的方法：

RCT_EXPORT_METHOD(makeNetworkRequest:(RCTResponseSenderBlock)callback) {
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        // 模拟网络请求延迟
        sleep(2);
        NSString *response = @"Network request success";
        callback(@[response]);
    });
}

7.2 React Native 处理异步调用

在 React Native 中调用这个异步方法：

MyNativeModule.makeNetworkRequest((response) => {
    console.log('Network response:', response);
});

通过这种方式，React Native 可以顺利处理 Objective - C 模块中的异步操作。

八、错误处理

8.1 Objective - C 模块中的错误处理

在 Objective - C 模块方法中，可以通过回调传递错误信息。例如，修改加法方法以处理错误：

RCT_EXPORT_METHOD(addNumbers:(nonnull NSNumber *)a and:(nonnull NSNumber *)b callback:(RCTResponseSenderBlock)callback) {
    if (![a isKindOfClass:[NSNumber class]] ||![b isKindOfClass:[NSNumber class]]) {
        NSError *error = [NSError errorWithDomain:@"MyNativeModuleError" code:1 userInfo:@{NSLocalizedDescriptionKey: @"Invalid input types"}];
        callback(@[error]);
        return;
    }
    NSNumber *result = @([a doubleValue] + [b doubleValue]);
    callback(@[result]);
}

8.2 React Native 处理错误

在 React Native 中，在回调中处理错误：

MyNativeModule.addNumbers('two', 3, (errorOrResult) => {
    if (errorOrResult.error) {
        console.error('Error from native module:', errorOrResult.error);
    } else {
        console.log('The result is:', errorOrResult);
    }
});

这样就实现了在通信过程中的错误处理机制。

九、性能优化

9.1 减少桥接调用次数

桥接调用会带来一定的性能开销，因此尽量合并多个相关的操作，减少频繁的桥接调用。例如，在 Objective - C 模块中提供一个批量处理方法，而不是多个单一操作方法，这样可以减少 JavaScript 与原生代码之间的通信次数。

9.2 合理使用缓存

对于一些频繁调用且结果不经常变化的方法，可以在 Objective - C 模块中实现缓存机制。例如，缓存一些配置信息或计算结果，避免每次调用都进行重复的计算或查询操作。

9.3 优化数据传输

在传递数据时，尽量精简数据结构。避免传递不必要的大对象或复杂数据，减少数据序列化和反序列化的时间。如果必须传递复杂数据，可以考虑使用更高效的序列化格式，如 Protocol Buffers 或 MessagePack 等。

十、常见问题与解决方法

10.1 模块未找到

在 React Native 中调用 Objective - C 模块时，可能会遇到模块未找到的错误。这通常是由于模块注册不正确或模块名不一致导致的。确保在 Objective - C 中使用 RCT_EXPORT_MODULE() 正确注册模块，并且在 React Native 中使用的模块名与 Objective - C 中注册的模块名完全一致。

10.2 类型不匹配

在传递参数和返回值时，可能会出现类型不匹配的问题。例如，在 Objective - C 中期望接收 NSNumber 类型，但在 React Native 中传递了字符串。仔细检查参数和返回值的类型，确保在两者之间的转换是正确的。

10.3 回调未触发

在异步操作中，回调未触发可能是由于线程问题或错误处理不当。确保在异步操作完成后，在正确的线程上调用回调方法，并且在错误处理中不要遗漏回调的触发。

通过以上详细的介绍和代码示例，相信开发者们能够深入理解并熟练掌握 Objective - C 与 React Native 模块之间的通信实践，在移动应用开发中充分发挥两者的优势，打造出更加高效、强大的应用程序。