Swift iOS 16.0中NavLink跳转14页后失效问题求助

问题说明 #

开发书籍APP时，通过屏幕底部的NavLink按钮实现翻页，跳转至第14页前均正常，但从第14页逐步翻到第15页时屏幕空白。直接从第14页跳转至第15页无异常，仅从首页逐步翻页时出现问题。已排查：重启Xcode、更换iPhone模拟器、确认页面拼写无误，均未解决。

导航代码示例 #

每页导航结构一致，仅目标页面不同：

HStack{
    // previous page
    NavigationLink(destination: aristotlesPoetics13()) {
        Image(systemName: "arrowshape.left")
            .font(.system(size: 30))
            .foregroundColor(Color("yellowBeige"))
            .padding([.top, .trailing])
    }
    
    // home
    NavigationLink(destination: ContentView()) {
        Image(systemName: "house")
            .font(.system(size: 30))
            .foregroundColor(Color("yellowBeige"))
            .padding([.top, .leading, .trailing])
    }
    // next page
    NavigationLink(destination: aristotlesPoetics15()) {
        Image(systemName: "arrowshape.right")
            .font(.system(size: 30))
            .foregroundColor(Color("yellowBeige"))
            .padding([.top, .leading])
    }
}

问题原因分析 #

NavLink基于SwiftUI的导航栈（NavigationView/NavigationStack）工作，逐步翻页会将每一页依次压入栈中。当栈深度达到一定程度时，可能出现以下问题：

• 内存占用过高导致视图渲染异常；
• 部分页面的初始化逻辑在栈过深时触发隐藏错误（比如资源加载、视图循环依赖等）；
• 旧版NavigationView对栈深度有隐性限制，超过后可能出现渲染失效。

解决方案 #

方案1：统一页面视图+状态管理（最优解） #

放弃为每一页创建单独的View，改用通用书籍页面视图，通过状态变量控制当前页码加载对应内容。这样导航栈始终只有一个页面视图，彻底避免栈深度问题：

// 通用书籍页面视图
struct BookPageView: View {
    @Binding var currentPage: Int
    let totalPages: Int
    
    var body: some View {
        VStack {
            // 根据currentPage加载对应页码内容（示例）
            Text("第\(currentPage)页内容")
            
            HStack {
                // 上一页
                Button {
                    if currentPage > 1 {
                        currentPage -= 1
                    }
                } label: {
                    Image(systemName: "arrowshape.left")
                        .font(.system(size: 30))
                        .foregroundColor(Color("yellowBeige"))
                        .padding([.top, .trailing])
                }
                
                // 返回首页
                NavigationLink(destination: ContentView()) {
                    Image(systemName: "house")
                        .font(.system(size: 30))
                        .foregroundColor(Color("yellowBeige"))
                        .padding([.top, .leading, .trailing])
                }
                
                // 下一页
                Button {
                    if currentPage < totalPages {
                        currentPage += 1
                    }
                } label: {
                    Image(systemName: "arrowshape.right")
                        .font(.system(size: 30))
                        .foregroundColor(Color("yellowBeige"))
                        .padding([.top, .leading])
                }
            }
        }
    }
}

首页跳转时传入初始页码：

NavigationLink(destination: BookPageView(currentPage: .constant(1), totalPages: 15)) {
    Text("打开书籍")
}

方案2：控制导航栈深度 #

如果必须保留多页面结构，可通过NavigationStack的path绑定管理导航路径，每次翻页时只保留必要页面，避免栈无限加深：

// 在父视图中定义路径状态
@State private var navigationPath = [Int]()

// 跳转下一页时更新路径
Button {
    navigationPath = [currentPage + 1] // 仅保留当前要跳转的页码
} label: {
    Image(systemName: "arrowshape.right")
}

// NavigationStack使用path绑定
NavigationStack(path: $navigationPath) {
    // 根据路径中的页码加载对应页面
    switch navigationPath.last {
    case 1: aristotlesPoetics1()
    case 2: aristotlesPoetics2()
    // ...其他页码
    default: ContentView()
    }
}

方案3：排查第15页视图代码 #

检查aristotlesPoetics15()视图的初始化逻辑，定位是否存在栈深度相关的隐藏问题：

• 排查是否有在多次初始化时才会触发的资源加载错误（比如图片路径错误、异步加载逻辑异常）；
• 检查是否存在无限循环或视图层级嵌套过深的情况；
• 尝试简化第15页的视图代码，逐步添加内容，定位导致空白的具体部分。

内容的提问来源于stack exchange，提问作者JakeW