导航链接导致 Swift UI 中出现灰屏答案

【问题标题】：Navigation Link leading to gray screen in Swift UI导航链接导致 Swift UI 中出现灰屏
【发布时间】：2021-05-25 04:41:25
【问题描述】：

我是 SwiftUI 的新手，并且遇到了一个错误，即当我使用太多导航链接时，我的整个屏幕变灰。在研究错误时我找不到任何解决方案。我正在最新版本的 Xcode 12.4 上运行该项目。我目前的设置是有 2 个不同的 swiftUI 视图，每个视图都包含一个到另一个的导航链接。

This is what it looks like

代码：

PageOne.swift

struct PageOne: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("This is page 1")
                    .font(.system(size: 36, weight: .bold))
                    .padding(.bottom)
                
                NavigationLink(
                    destination: PageTwo(),
                    label: {
                        VStack {
                            Text("Go to Page 2")
                                .font(.system(size: 24, weight: .medium))
                                .foregroundColor(.white)
                                .frame(width: 200, height: 50, alignment: .center)
                                .background(Color.blue)
                                .cornerRadius(12)
                            
                        }
                    })
            }
        }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
    }
}

PageTwo.swift

struct PageTwo: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("This is page 2")
                    .font(.system(size: 36, weight: .bold))
                    .padding(.bottom)
                
                NavigationLink(
                    destination: PageOne(),
                    label: {
                        VStack {
                            Text("Go to Page 1")
                                .font(.system(size: 24, weight: .medium))
                                .foregroundColor(.white)
                                .frame(width: 200, height: 50, alignment: .center)
                                .background(Color.blue)
                                .cornerRadius(12)
                            
                        }
                    })
            }
        }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
    }
}

Project file

【问题讨论】：

导航视图太多了……
这是否回答了您的问题stackoverflow.com/a/61707588/12299030？
同样的问题 - 这样做对我有帮助：stackoverflow.com/questions/64868119/…

标签： swiftui swiftui-navigationlink swiftui-navigationview

【解决方案1】：

视图层次结构中应该只有一个NavigationView。

尝试在根级别创建一个NavigationView：

struct ContentView: View {
    var body: some View {
        NavigationView {
            PageOne()
                .navigationBarHidden(true)
                .navigationBarBackButtonHidden(true)
        }
    }
}

然后从子视图中删除NavigationView：

struct PageOne: View {
    var body: some View {
        VStack {
            Text("This is page 1")
                .font(.system(size: 36, weight: .bold))
                .padding(.bottom)
            
            NavigationLink(
                destination: PageTwo(),
                label: {
                    VStack {
                        Text("Go to Page 2")
                            .font(.system(size: 24, weight: .medium))
                            .foregroundColor(.white)
                            .frame(width: 200, height: 50, alignment: .center)
                            .background(Color.blue)
                            .cornerRadius(12)
                        
                    }
                })
        }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
    }
}

struct PageTwo: View {
    var body: some View {
        VStack {
            Text("This is page 2")
                .font(.system(size: 36, weight: .bold))
                .padding(.bottom)
            
            NavigationLink(
                destination: PageOne(),
                label: {
                    VStack {
                        Text("Go to Page 1")
                            .font(.system(size: 24, weight: .medium))
                            .foregroundColor(.white)
                            .frame(width: 200, height: 50, alignment: .center)
                            .background(Color.blue)
                            .cornerRadius(12)
                        
                    }
                })
        }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
    }
}

【讨论】：