[SwiftUI] iOS 15 이하에서 navigationBarHidden이 동작하지 않는 이슈

안녕하세요.

 

SwiftUI를 사용할 때 iOS 15 이하 환경에서 navigationBarHidden 수식어를 사용해도 NavigationBar가 노출되는 이슈를 발견했고 그에 따른 해결방법을 공유하고자 합니다.

---

# 이슈

아래 상황을 모두 만족할 때 이슈가 발생하는 것 같았어요.

1) iOS 15 이하 일 때
2) 부모 뷰에서 NavigationView를 사용
3) NavigationLink를 사용하여 자식 뷰로 이동
4) 자식 뷰는 TabView를 사용
5) 자식 뷰에서 navigationBarHidden 수식어 사용

 

 

이슈가 발생하는 코드도 공유할게요.

 

	struct ContentView: View {
	var body: some View {
	NavigationView {
	NavigationLink {
	SubView()
	} label: {
	Text("Go next View")
	}
	}
	}
	}
	struct SubView: View {
	@State var tab: Int = 0
	var body: some View {
	TabView(selection: $tab) {
	Text("Hello")
	.tag(0)
	.tabItem {
	Label("Hello", systemImage: "person")
	}
	Text("World")
	.tag(1)
	.tabItem {
	Label("World", systemImage: "play")
	}
	}
	.navigationBarHidden(true)
	}
	}

view raw ContentView.swift hosted with ❤ by GitHub

 

iOS 16에서 확인해 보면 문제없이 잘 됩니다.

 

 

 

 

그런데 희한하게 iOS 15에서 실행시키면.... navigationBar가 노출되는 버그(?)가 있더라구요..;;;

 

 

 

 

# 해결방법

(1) 우선, NavigationView의 Style을 명시적으로 stack으로 지정해 주세요.

 

(2) 그리고 TabView에 navigationBarHidden 수식어를 사용하는 것이 아닌 TabView의 content 뷰 각각마다

navigationBarHidden 수식어와 navigationBarTitle 수식어를 적용해 주세요.

 

 

아래는 전체 코드입니다.

 

	struct ContentView: View {
	var body: some View {
	NavigationView {
	NavigationLink {
	SubView()
	} label: {
	Text("Go next View")
	}
	}
	.navigationViewStyle(.stack) // (1)
	}
	}
	struct SubView: View {
	@State var tab: Int = 0
	var body: some View {
	TabView(selection: $tab) {
	Text("Hello")
	.tag(0)
	.tabItem {
	Label("Hello", systemImage: "person")
	}
	.navigationBarHidden(true) // (2)
	.navigationBarTitle("") // (2)
	Text("World")
	.tag(1)
	.tabItem {
	Label("World", systemImage: "play")
	}
	.navigationBarHidden(true) // (2)
	.navigationBarTitle("") // (2)
	}
	}
	}

view raw ContentView.swift hosted with ❤ by GitHub

 

iOS 15에서도 잘 동작하네요!!!ㅎㅎㅎ

 

 

 

 

 

# 번외 - navigationBarHidden과 navigationBarTitle를 같이 적용한 이유

navigationBarTitle 수식어를 같이 사용하지 않는다면, 아래처럼 다른 Tab을 눌러서 뷰가 전환되는 순간 NavigationBar가 다시 생기는 이슈가 발생합니다.

(이유는 저도 잘 모르겠어요...;;;;)

 

 

 

---

이번 글은 여기서 마무리.