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触发逻辑,需要:
- 确保项目已配置桥接(默认创建Swift文件时会自动生成)
- 在Objective-C文件中导入自动生成的Swift头文件:
#import "YourProjectName-Swift.h"
- 修改原有的
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
相关产品推荐
相关产品推荐

