如何在React Native中运行现有Swift应用？含性能场景与示例

嘿，我来帮你搞定把Swift代码集成到React Native的事儿！你要做的核心是通过**原生模块（Native Modules）**实现RN和Swift的通信，让RN能调用你写的Swift功能（不管是Hello World测试还是后续的图像处理）。下面是针对你的基础Swift应用的一步步操作：

1. 准备React Native项目（如果还没有的话） #

如果你还没有RN项目，先初始化一个：

npx react-native init MyRNApp
cd MyRNApp

2. 打开iOS原生工程 #

用Xcode打开RN项目里的ios/MyRNApp.xcworkspace文件，这就是我们要嵌入Swift代码的地方。

3. 创建Swift原生模块文件 #

• 在Xcode里右键点击项目目录，选择New File...，然后选Swift File，比如命名为HelloWorldModule.swift（后续可以改名为ImageProcessor.swift来承载图像处理逻辑）。
• 第一次创建Swift文件时，Xcode会提示你是否生成Objective-C bridging header，点击Create——这个文件是让Objective-C和Swift互通的关键，RN底层依赖Objective-C，所以必须要有它。

4. 编写Swift模块核心代码 #

打开刚才创建的HelloWorldModule.swift，写入测试用的Hello World逻辑（后续直接替换成你的图像处理代码即可）：

import Foundation

@objc(HelloWorldModule)
class HelloWorldModule: NSObject {

  // 暴露给RN调用的方法，必须用@objc标记，这里用回调返回结果给RN
  @objc func sayHello(_ callback: RCTResponseSenderBlock) {
    let swiftMessage = "Hello World from Swift!"
    // 通过回调把结果传递给RN，第一个参数是错误（这里传空），第二个是返回内容
    callback([NSNull(), swiftMessage])
  }

  // 必须实现的方法，告诉RN这个模块的名称
  @objc static func moduleName() -> String! {
    return "HelloWorldModule"
  }

  // 可选配置：如果需要在主线程执行模块方法，返回true
  @objc func requiresMainQueueSetup() -> Bool {
    return true
  }
}

5. 配置桥接文件 #

打开自动生成的MyRNApp-Bridging-Header.h，确保它引入RN的核心头文件：

#import <React/RCTBridgeModule.h>

6. 注册Swift模块到RN #

创建一个Objective-C文件来完成模块注册，右键项目目录新建HelloWorldModule.m：

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(HelloWorldModule, NSObject)

// 把Swift里的sayHello方法暴露给RN
RCT_EXTERN_METHOD(sayHello:(RCTResponseSenderBlock)callback)

@end

7. 在RN中调用Swift模块 #

修改RN的App.js代码，调用我们的Swift模块：

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

// 引入注册好的Swift模块
const { HelloWorldModule } = NativeModules;

const App = () => {
  useEffect(() => {
    // 调用Swift的sayHello方法
    HelloWorldModule.sayHello((error, message) => {
      if (error) {
        console.error(error);
      } else {
        console.log(message);
        Alert.alert('来自Swift的消息', message);
      }
    });
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>React Native 主应用</Text>
    </View>
  );
};

export default App;

8. 运行项目 #

在终端执行命令启动iOS应用：

npx react-native run-ios

等项目加载完成后，你会看到弹出的“Hello World from Swift!”提示，这就说明RN成功调用了Swift代码！

后续扩展（比如图像处理） #

如果要集成你的图像处理逻辑，只需要把sayHello方法替换成对应的Swift代码即可：比如接收RN传递的图片路径/base64，在Swift里完成处理，再通过回调把处理后的结果返回给RN。注意把耗时的图像处理操作放在后台线程执行，完成后切回主线程回调RN，这样能保证应用的性能流畅。

内容的提问来源于stack exchange，提问作者K.Wu