面试题：Objective-C 中如何实现与 React Native 模块简单通信

Question

请描述在 Objective-C 项目中，搭建与 React Native 模块通信环境的基本步骤，并举例说明如何通过一个简单的方法调用，从 Objective-C 传递数据到 React Native 模块。

Answer 1

搭建通信环境基本步骤

1. 初始化 React Native 项目：在终端使用 react-native init 命令创建一个新的 React Native 项目。
2. 集成到 Objective - C 项目：
   • 将 React Native 项目的 node_modules/react-native 目录添加到 Xcode 项目中。
   • 配置 Build Phases，添加 React Native 依赖库，如 libReact.a 等。
   • 配置 Header Search Paths，确保能够找到 React Native 的头文件。
3. 创建桥接模块：
   • 在 Objective - C 中创建一个继承自 RCTBridgeModule 的类，用于定义与 React Native 通信的接口。
   • 在 React Native 端，使用 NativeModules 来接收 Objective - C 传来的信息。

从 Objective - C 传递数据到 React Native 模块示例

1. Objective - C 端：
   • 创建桥接模块类，例如 MyBridgeModule.h：

#import <React/RCTBridgeModule.h>

@interface MyBridgeModule : NSObject <RCTBridgeModule>
@end

- 在 `MyBridgeModule.m` 中实现模块方法：

#import "MyBridgeModule.h"

@implementation MyBridgeModule
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(sendDataToRN:(NSString *)data) {
    // 这里 data 就是要传递给 React Native 的数据
    // 可以在此处进行数据处理等操作
}
@end

2. React Native 端：
   • 在 JavaScript 文件中引入并使用该模块，例如 App.js：

import React, { useEffect } from'react';
import { NativeModules } from'react-native';

const { MyBridgeModule } = NativeModules;

const App = () => {
    useEffect(() => {
        MyBridgeModule.sendDataToRN('Hello from Objective - C');
    }, []);

    return (
        // 组件内容
    );
};

export default App;

在上述示例中，Objective - C 端定义了一个 sendDataToRN 方法用于传递数据，React Native 端通过 NativeModules 调用该方法并接收数据。