当视图在 SwiftUI 中的 TabView 中时，NavigationView 标题不会出现

Question

我有两个视图，每个视图都包含带有标题的 NavigationView。我创建了一个 TabBar 视图，它上面也有一个 NavigationView。

struct TabbarView: View {
var body: some View {
    NavigationView{
    TabView {
        MainContentView()
            .tabItem {
                VStack {
                    Text("Main")
                }
        }.tag(0)

        SearchContentView()
            .tabItem {
                VStack {
                    Text("Search")
                }
        }.tag(1)
    }
    }.navigationBarBackButtonHidden(true)
    .navigationBarHidden(true)
}

}

我曾尝试隐藏此视图的导航栏，但这不起作用。仅显示此视图的导航栏。

这是MainContentView()

struct MainContentView: View {

var body: some View {
    NavigationView {
        Text("Some Content View")
        }
    .navigationBarTitle("Travel")
}

}

知道如何解决这个问题。谢谢！

更新： 基本上，当我点击 Log In 按钮时，我通过 NavigationLink 传递 TabBarView()。

   NavigationLink(destination: TabbarView()) {
                        HStack {
                            Text("Log In")
                        }
                        .padding()
                        .frame(width: geometry.size.width - 40, height: 40)
                        .foregroundColor(Color.white)
                        .background(Color.blue)
                        .cornerRadius(5)
                }.padding(.bottom, 40)

这样做时，它会显示带有子视图的 TabbarView()，这就是我所看到的： “Travel”（childView 的navigationBarTitle）上方的空间是标签栏的navigationBar，因为我将它推入navigationStack。

Answer 1

首先要指出的是，代码中的所有导航栏修饰符都应该是NavigationView 内部视图的修饰符，而不是NavigationView 本身的修饰符。来自.navigationBarTitle 的文档，例如：

此修饰符仅在此视图位于 NavigationView 内部且可见时才生效。

另外，没有必要让NavigationView 包裹您的TabView，然后在您的MainContentView 中包裹另一个。这只会导致嵌套导航栏，您绝对不希望这样。相反，只需使用一个NavigationView。我还建议您不要将NavigationView 放在MainContentView 正文中。

我已经重构了你的代码以显示我在说什么，虽然我不确定你在哪里尝试使用.navigationBarBackButtonHidden 和.navigationBarHidden，所以我省略了它们。请记住，它们的功能就像.navigationBarTitle - 您需要将它们用作NavigationView 内部视图的修饰符，而不是NavigationView 本身。

struct TabBarView: View {
    var body: some View {
        TabView {
            NavigationView {
                MainContentView()
            }
                .tag(0)
                .tabItem {
                    Text("Main")
                }

            SearchContentView()
                .tag(1)
                .tabItem {
                    Text("Search")
                }
        }
    }
}

struct MainContentView: View {
    var body: some View {
        Text("Some Content View")
            .navigationBarTitle("Travel")
    }
}

您可能会注意到，我还从.tabItem 中删除了VStack。您可以将Text 和Image 都放在.tabItem 中而不需要VStack，如果我没记错的话，.tabItem 会忽略任何不是Text 或Image 的东西。

Answer 2

如果您在 tabview 之前需要 Login/SignUp View，请不要使用 NavigationView 来包装它。在登录/注册视图中

@EnvironmentObject var authService:AuthService

var body: some View{
    ZStack{
        if(!authService.isSignedIn){
            Button(action: {
                self.authService.signIn()
            }) {
                Text("Login")
            }
        }
        else{
            TabBarView()
        }
    }
}

在子视图中，您可以使用 @EnvironmentObject 控制 isSignedIn 变量，并在退出时更改该值 这是之前使用的TabBarView() 的示例：

var body: some View {
    TabView {
        NavigationView{
            FirstView()
        }
        .tabItem {
            VStack{
                Image("first")
                Text("First")
            }
        }
        NavigationView{
            SecondView()
        }
        .tabItem {
            VStack{
                Image("second")
                Text("Second")
            }
        }
    }
}

这可能是选项卡视图之一：

@EnvironmentObject var authService:AuthService

var body: some View {
    TextView("Hello World")
    .navigationBarItems(trailing: LogOutButton(logOutFunction: authService.signOut))
}

Answer 3

这也适用于 iOS 13：

var body: some View {
        TabView {
            NavigationView {
                FirstTabbarView(viewModel: viewModel)
                    .navigationBarTitle("NavBar title Tabbar1", displayMode: .inline)
            }
            .tabItem {
                Image(systemName: "house.fill")
                Text("Tab bar 1")
            }
            
            NavigationView {
                SecondTabbarView(viewModel: viewModel)
                    .navigationBarTitle("Navbar title Tabbar 2", displayMode: .inline)
            }
            .tabItem {
                Image(systemName: "person.fill")
                Text("Tab bar 2")
            }
            
        }
    }