【SwiftUI】NavigationBar の戻るボタンのテキストを消す

やりたいこと

以下のように、戻るボタンからテキスト部分だけを無くしたい。
Before - After

実装

navigationBarBackButtonHidden(true) で戻るボタンごと削除する。
そして代わりに toolbar で、アイコンのみの戻るボタンを追加してあげれば OK。

struct NextPage: View {
    @Environment(\.presentationMode) var presentaion
  
    var body: some View {
        Text("Next Page!")
            .navigationTitle("Next Page")
            .navigationBarTitleDisplayMode(.inline)
            // 以下を追加
            .navigationBarBackButtonHidden(true)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                      Button(action: { presentaion.wrappedValue.dismiss() }) {
                        Image(systemName: "chevron.backward")
                    }
                }
            }
    }
}

ただし、これだけだとスワイプで戻れなくなってしまうので、以下の Extension を追加する。

extension UINavigationController: UIGestureRecognizerDelegate {
    override open func viewDidLoad() {
        super.viewDidLoad()
        interactivePopGestureRecognizer?.delegate = self
    }

    public func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        return viewControllers.count > 1
    }
}

Modifier にする

いろんな場面で使う場合、あんな長ったらしいコードは書きたくないので Modifier 化してしまおう。

struct NavigationBarBackButtonTextHidden: ViewModifier {
  @Environment(\.presentationMode) var presentaion
  
  func body(content: Content) -> some View {
    content
      .navigationBarBackButtonHidden(true)
      .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
          Button(action: { presentaion.wrappedValue.dismiss() }) {
            Image(systemName: "chevron.backward")
          }
        }
      }
  }
}

extension View {
  func navigationBarBackButtonTextHidden() -> some View {
    return self.modifier(NavigationBarBackButtonTextHidden())
  }
}

これにより、一行追加すれば適用されるようになる

struct NextPage: View {
    var body: some View {
        Text("Next Page!")
            .navigationTitle("Next Page")
            .navigationBarTitleDisplayMode(.inline)
            .navigationBarBackButtonTextHidden()
    }
}

参考