You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native项目中替换Storyboard为SwiftUI切换根视图控制器的方法

可行,具体实现方法如下

核心思路和你之前切换到Storyboard的逻辑一致:把SwiftUI视图通过UIHostingController包装成UIKit兼容的视图控制器,再替换应用的根视图控制器即可。

步骤1:创建SwiftUI视图

先定义你要跳转的SwiftUI主视图:

import SwiftUI

struct MainSwiftUIView: View {
    var body: some View {
        // 这里写你的SwiftUI界面代码
        VStack(spacing: 20) {
            Text("SwiftUI 页面")
                .font(.title)
            Button("切回 React Native") {
                // 如果需要切回RN,可在这里实现反向切换逻辑
                guard let window = UIApplication.shared.windows.first else { return }
                window.rootViewController = RCTRootView.init(
                    bundleURL: RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index"),
                    moduleName: "YourRNProjectName",
                    initialProperties: nil,
                    launchOptions: nil
                )
            }
        }
    }
}

步骤2:实现切换逻辑(Swift版本)

创建一个管理类,封装切换到SwiftUI的方法:

import UIKit
import SwiftUI

@objc class SwiftUINavigator: NSObject {
    @objc func navigateToSwiftUI() {
        guard let window = UIApplication.shared.windows.first else { return }
        
        // 用UIHostingController包装SwiftUI视图
        let swiftUIHost = UIHostingController(rootView: MainSwiftUIView())
        
        // 可选:如果需要导航栏,嵌套UINavigationController
        let navController = UINavigationController(rootViewController: swiftUIHost)
        navController.navigationBar.prefersLargeTitles = true
        
        // 替换根视图控制器
        window.rootViewController = navController
        window.makeKeyAndVisible()
    }
}

步骤3:在原有Objective-C代码中调用(如果需要)

如果你要保留原有的Objective-C触发逻辑,需要:

  1. 确保项目已配置桥接(默认创建Swift文件时会自动生成)
  2. 在Objective-C文件中导入自动生成的Swift头文件:
#import "YourProjectName-Swift.h"
  1. 修改原有的goToNativeView方法:
- (void) goToNativeView
{
    SwiftUINavigator *navigator = [[SwiftUINavigator alloc] init];
    [navigator navigateToSwiftUI];
}

注意事项

  • UIHostingController要求iOS 13及以上,若需兼容iOS 12及以下,需添加版本判断并做降级处理
  • 如果需要从SwiftUI切回React Native,只需把根视图控制器重新设置为RN的RCTRootView即可(如步骤1中按钮的示例代码)
  • 若SwiftUI视图需要接收参数,可在MainSwiftUIView中定义属性并初始化时传入

内容的提问来源于stack exchange,提问作者Anderson Vanzo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.10 16:55:27