[SwiftUI] Navigation bar가 계속 쌓이는 문제를 해결하자

SwiftUI를 활용해서 첫 프로젝트를 진행할 때, 은근히 간단하지만 해결하기 어려웠던 이슈가 바로 해당 이슈였다. Navigation bar가 계속 쌓인다..? 라고 검색할 수도 없고, 처음 swfit를 접하는 사람으로써 해결하기 조금 버거웠던! 구글링도 힘들었던 문제.

 

⚠️ 이슈사항

• 아래 사진처럼, navigationLink 으로 버튼을 만들어서 View간의 이동을 하게 되면, 두번째는 괜찮지만, 세번째부터 navigationbar가 쌓이게 된다. 
• NavigationBarHidden(true) 을 하면 될줄 알았지만, 되지 않는다.

 

1. ContentView - 가장 첫 번째 페이지 코드

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            VStack {
                Text("This is Main page.")
                    .bold()
                NavigationLink(destination: SecondPage()) {
                    Text("Click Here")
                        .foregroundColor(Color.white)
                        .frame(width: 100, height: 60, alignment: .center)
                        .background(RoundedRectangle(cornerRadius: 10)
                            .fill(Color.red))
                }
                .navigationBarHidden(true)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

2. SecondPage - 두번 째 화면의 코드

import SwiftUI

struct SecondPage: View {
    var body: some View {
        NavigationView {
            VStack{
                Text("This is Second Page.")
                NavigationLink(destination: ThirdPage()) {
                    Text("Click Here")
                        .foregroundColor(Color.white)
                        .frame(width: 100, height: 60, alignment: .center)
                        .background(RoundedRectangle(cornerRadius: 10)
                            .fill(Color.green))
                }
                .navigationBarHidden(true)
            }
        }
    }
}

struct SecondPage_Previews: PreviewProvider {
    static var previews: some View {
        SecondPage()
    }
}

3. ThirdPage - 마지막 화면의 코드

import SwiftUI

struct ThirdPage: View {
    var body: some View {
        Text("This is Last Page.")
    }
}

struct ThirdPage_Previews: PreviewProvider {
    static var previews: some View {
        ThirdPage()
    }
}

 

👉 이렇게 하면 안되는 이유

• NavigationView를 NavigationLink 가 있는 모든 페이지에 걸어주었다.
• NavigationView 로 묶여있어만, View 전환이 가능한 줄 알았기 때문이다.

NavigationView가 계속 해서 쌓이기 때문에 위에 navigation bar 도 계속 쌓이는 것이다!

해결 방법은, NavigationView를 NavigationView가 시작되는 부분에만 걸어주고, 그 이후의 화면은 걸지 않아도 된다. 그니까 위 코드에서 SecondPage에서 NavigationView 코드를 빼면 된다. 

SecondPage 수정 버전

import SwiftUI

struct SecondPage: View {
    var body: some View {
        VStack{
            Text("This is Second Page.")
            NavigationLink(destination: ThirdPage()) {
                Text("Click Here")
                    .foregroundColor(Color.white)
                    .frame(width: 100, height: 60, alignment: .center)
                    .background(RoundedRectangle(cornerRadius: 10)
                        .fill(Color.green))
            }
            .navigationBarHidden(true)
        }
    }
}

struct SecondPage_Previews: PreviewProvider {
    static var previews: some View {
        SecondPage()
    }
}

 

최종 화면은 아래와 같다.

 

 

처음에 개발을 할 때 이 문제로 헤맸던 경험이 있다. 생각보다 간단한 문젠데 뭐라고 검색해야할지몰랐었다. 앞으론 잘해야징~