【SwiftUI】NavigationViewからNavigationStackへの移行

はじめに

iOS16からSwiftUIのNavigationViewが非推奨になるということで、こちらの記事を「Migrating to new navigation type」👇を読んでまとめてみました。

環境

Xcode 14.0

内容

ナビゲーションViewを更新する

非推奨のNavigationViewは

struct NavigationStack<Data, Root> where Root : View へ更新する

非推奨

NavigationView { // This is deprecated.
    /* content */
}
.navigationViewStyle(.stack)

👇

iOS16~ 推奨

NavigationStack {
    /* content */
}

複数列のナビゲーションViewを更新する

複数列のナビゲーションViewはNavigationSplitViewを使用する

2列の場合

非推奨

NavigationView { // This is deprecated.
    /* column 1 */
    /* column 2 */
}

👇

iOS16~ 推奨

NavigationSplitView {
    /* column 1 */
} detail: {
    /* column 2 */
}

3列の場合

非推奨

NavigationView { // This is deprecated.
    /* column 1 */
    /* column 2 */
    /* column 3 */
}

👇

iOS16~ 推奨

NavigationSplitView {
    /* column 1 */
} content: {
    /* column 2 */
} detail: {
    /* column 3 */
}

isActiveを使ったナビゲーションを更新する

非推奨となったNavigationLinkのinit(_:destination:isActive:)は

NavigationStackのinit(path:root:)と NavigationLinkのnavigationDestination(for:destination:) へ更新する

非推奨

@State private var isShowingPurple = false
@State private var isShowingPink = false
@State private var isShowingOrange = false

var body: some View {
    NavigationView { // This is deprecated.
        List {
            NavigationLink("Purple", isActive: $isShowingPurple) {
                ColorDetail(color: .purple)
            }
            NavigationLink("Pink", isActive: $isShowingPink) {
                ColorDetail(color: .pink)
            }
            NavigationLink("Orange", isActive: $isShowingOrange) {
                ColorDetail(color: .orange)
            }
        }
    }
    .navigationViewStyle(.stack) 
}

👇

iOS16~ 推奨

@State private var path: [Color] = [] // Nothing on the stack by default.

var body: some View {
    NavigationStack(path: $path) {
        List {
            NavigationLink("Purple", value: .purple)
            NavigationLink("Pink", value: .pink)
            NavigationLink("Orange", value: .orange)
        }
        .navigationDestination(for: Color.self) { color in
            ColorDetail(color: color)
        }
    }
}

selectionを使ったナビゲーションを更新

非推奨となったNavigationLinkのinit(destination:tag:selection:label:)は

NavigationSplitViewのinit(sidebar:detail:)と NavigationLinkの init(_:value:)(init(value:label:)) で更新する

非推奨

let colors: [Color] = [.purple, .pink, .orange]
@State private var selection: Color? = nil // Nothing selected by default.

var body: some View {
    NavigationView { // This is deprecated.
        List {
            ForEach(colors, id: \.self) { color in
                NavigationLink(color.description, tag: color, selection: $selection) {
                    ColorDetail(color: color)
                }
            }
        }
        Text("Pick a color")
    }
}

👇

iOS16~ 推奨

var body: some View {
    NavigationSplitView {
        List(colors, id: \.self, selection: $selection) { color in
            NavigationLink(color.description, value: color)
        }
    } detail: {
        if let color = selection {
            ColorDetail(color: color)
        } else {
            Text("Pick a color")
        }
    }
}

おわりに

iOS16からディープリンクの実装が簡単になったと聞いておりましたが、たしかにそんな感じがしました。引き続き調べていきたいと思います。

参考