React Native —— swift 载入 react native 模块

1. 创建一个 react native 项目，见：juejin.cn/post/754017…

2. 应用入口——2种形式，一种是 在 App.swift 中 通过 WindowGroup，一种是 AppDelegate。2 个文件可以同时存在，但只能一种使用@main 进入

注意：

• 2 种方式的2 个文件，只能其中一个使用@main，iOS 规范，应用只能有一个入口文件
• launchscreen，最好别注释，否则会出现启动后，屏幕上下黑边（图中 plist 文件）
• 一定要通过 yarn ios 的方式启动，并且关闭已经打开的模拟器和终端（避免缓存问题），不要直接 xcode 运行，可能会有问题

问题如何将自己的 iOS 项目迁移进来 3. 上述命令行成功后，就可以使用 xcode 打开 yourproject.xcworkspace 工程，运行项目

4.按照这个思路，App.swift 作为入口，ConteView.swift 包含了 HomeView.swift 和 ProfileView.Swift。其中 HomeView.swift 嵌入了 ReactNative 的 UI。一下提供详细的介入步骤，以及详细代码。

1. App.swift

// swift ui entry

import SwiftUI
import React

@main
struct ReactSwiftDemoApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
            // .environmentObject(appDelegate.reactBridgeManager)
        }
    }
}

2. AppDelegate.swift

// AppDelegate.swift
import UIKit
import React

class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?
  
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    // 初始化ReactBridgeManager，这样桥接器会在应用启动时创建
    _ = ReactBridgeManager.shared
    return true
  }
}

3. ReactBridgeManager.swift 用于加载 react native 的代码

// ReactBridgeManager.swift
import Foundation
import React

class ReactBridgeManager: NSObject {
  static let shared = ReactBridgeManager()
  var bridge: RCTBridge?
  
  override private init() {
    super.init()
    initializeBridge()
  }

  private func initializeBridge() {
    if self.bridge == nil {
      #if DEBUG
      let jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
      #else
      let jsCodeLocation = Bundle.main.url(forResource: "main", withExtension: "jsbundle")
      #endif
      
      self.bridge = RCTBridge(bundleURL: jsCodeLocation, moduleProvider: nil, launchOptions: nil)
    }
  }
}

4. 创建各种 swift 的 view文件 ContentView.swif

//
//  ContentView.swift
//  HelloApp
//
//  Created by alex on 2025/8/19.
//

import SwiftUI
import SwiftData

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
            ProfileView()
                .tabItem {
                    Image(systemName: "person")
                    Text("Profile")
                }
        }
    }
}

#Preview {
    ContentView()
}

Home.swift

// HomeView.swift
import SwiftUI

struct HomeView: View {
  var body: some View {
    VStack(spacing: 0) {
      ReactNativeView(moduleName: "ReactSwiftDemo")
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
  }
}

Profile.swift

import SwiftUI

struct ProfileView: View {
    var body: some View {
        Text("Profile")
    }
}

ReactNativeView.swift，是其中，最重要的 View，涌入嵌入到 Home.swift

// ReactNativeView.swift
import SwiftUI
import React

struct ReactNativeView: UIViewRepresentable {
  let moduleName: String
  
  func makeUIView(context: Context) -> UIView {
    guard let bridge = ReactBridgeManager.shared.bridge else {
      return UIView()
    }
    
    let rootView = RCTRootView(bridge: bridge, moduleName: moduleName, initialProperties: nil)
    return rootView
  }
  
  func updateUIView(_ uiView: UIView, context: Context) {
    // 更新视图如果需要
  }
}

运行代码，最终效果如图

如何将代码运行到自己的手机上