登录
SwiftUI navigation stack 嵌套引起的导航错误
最近我们在推进 ModernNavigation 插件化架构时，遇到了一个 SwiftUI 开发中非常经典、但也极其容易让人抓狂的“幽灵问题”：嵌套 NavigationStack。 作为一名在 iOS 领域摸爬滚打多年的开发者，我深知这种架构层面的“小瑕疵”如果不彻底理清，后续会导致手势失效、双标题、甚至 Path 状态莫名丢失等一系列连锁反应。 今天我把这个问题深度复盘了一下，总结出了一套更符合我们 Redux 思想的解决方案。
案发现场：为什么你的 Navigation 崩了？ 我们在做插件化时，为了让模块独立，经常会习惯性地在 AppRoute 的 body 里写下这段代码： case .settings: NavigationStack { // 罪魁祸首在这里 SettingsView() }
当你从 HomeView（已经在一个 NavigationStack 内部）执行 router.push(.settings) 时，你就亲手制造了一个“栈中栈”。
症状分析：
- 权限冲突：外层的 NavigationPath 想管进度，内层的 NavigationStack 也想管进度，SwiftUI 直接“摆烂”，导致侧滑返回可能直接回到 App 根部。
- UI 灾难：你可能会在屏幕顶端看到两个叠加在一起的导航栏，或者是返回按钮莫名其妙消失。
- Redux 状态断裂：内层栈的操作完全脱离了我们 NavigationStore 的掌控。
处方：区分“动作”而非“视图” 解决这个问题的核心思想只有一句话：Push 是一场“接力”，Sheet 是一场“派对”。
- Push（推栈）：它是当前导航流的延续，绝对不能自带 NavigationStack。
- Sheet/Cover（弹窗）：它开启了一个全新的、独立的导航流，必须自带 NavigationStack 来管理它自己的子页面。
-
给视图加点“环境感知” 为了让视图在“被推入”和“被弹出”时表现不同（比如弹窗时需要一个“关闭”按钮），我们引入一个 isModal 标识(不太优雅)： struct SettingsView: View { var isModal: Bool = false @Environment(NavigationStore<AppRoute, AppSheet>.self) private var navStore
var body: some View { List { ... } .navigationTitle("设置") .toolbar { if isModal { ToolbarItem(placement: .cancellationAction) { Button("关闭") { navStore.dispatch(.dismiss) } } } } } }
-
在路由层实现“插件化”分流 在我们的 RouteViewFactory 实现中，我们需要明确区分这两种场景。不需要写超大的 switch，而是让 Factory 能够根据上下文返回正确的包装： struct UserRouteFactory: RouteViewFactory { func view(for route: Any) -> AnyView? { // 方案 A：通过路由类型区分 if let userRoute = route as? UserRoute { return AnyView(SettingsView(isModal: false)) // 纯净视图用于 Push }
// 方案 B：通过特定的 Sheet 路由类型 if let sheet = route as? UserSheet { switch sheet { case .settingsModal: return AnyView( NavigationStack { // 只有 Sheet 才包裹 Stack SettingsView(isModal: true) } ) } } return nil} }
深度思考：Redux 架构下的单向流 在 Redux 模式下，我们的 NavigationStore 应该对这种层级关系有清晰的定义：
- path 数组：管理的是同一个 NavigationStack 内的线性增减。
- presentedSheet：管理的是一个全新的 UIWindow 级别的层级。 为什么我们要这么做？ 这样做最大的好处是导航状态的可预测性。 当你在处理 Deep Linking（深度链接）时，你可以清晰地在代码里写：
“先 Push 到用户中心，再从用户中心 Present 一个修改头像的弹窗。”
如果每个页面都自带 NavigationStack，这种跨层级的逻辑跳转将会是调试噩梦。
总结与更新 我们要对现有的导航包进行以下约定：
- 所有模块暴露的 Push 视图必须是“裸”的（无 Stack）。
- 模块可以定义专有的 SheetRoute，由对应的 Factory 负责包裹 NavigationStack。
- 统一使用 isModal 或 Environment 变量来处理导航栏交互的差异。 这样一来，我们的 ReduxRouterStack 就能保持极其精简，同时具备极强的健壮性。
