SwiftUI 中 NavigationView 中后退按钮的默认文本

Question

I use a NavigationLink to navigate from "View1" to "View2", on the second view, the back button gets the title of the previous view

But, if the title of the previous view is very long, then the back button gets the text "Back"

How could I change that "Back" text?

I wanna make my app available in multiple languages, but it seems that "Back" does not change when phone's language changes

struct ContentView: View {

    var body: some View {

        return NavigationView {
            VStack {
                Text("View1")
                NavigationLink(destination: Text("View2").navigationBarTitle("Title View2", displayMode: .inline)) {
                    Text("NavigationLink")
                }
            }.navigationBarTitle("Title View1")
        }

    }
}

PS: I'd like to keep this functionality as it it, I just want to change the language used for back button

Answer 1

here is a workaround ....

struct ContentView: View {
        @State private var isActive: Bool = false

        var body: some View {
            NavigationView {
                VStack {
                    NavigationLink(destination: DetailView(), isActive: $isActive) {
                        Text("Title View2")
                    }
                }.navigationBarTitle(! isActive ? "Title View2" : "Your desired back Title", displayMode: .inline)
            }
        }
    }

    struct DetailView: View {
        var body: some View {
            Text("View2")
        }
    }

Answer 2

You can create a custom back button in your navigation link by hiding native navigationBackButton. In the custom back button, you can add your translated custom back button title.

struct ContentView: View {

    var body: some View {

        return NavigationView {
            VStack {
                Text("View1")
                NavigationLink("NavigationLink", destination: NextView())
            }.navigationBarTitle("Title View1")
        }
    }
}
struct NextView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var backButton : some View { Button(action: {
        self.presentationMode.wrappedValue.dismiss()
        }) {
            HStack {
            Image("backImage") // BackButton Image
                .aspectRatio(contentMode: .fit)
                .foregroundColor(.white)
                Text("Go Back") //translated Back button title 
            }
        }
    }
    var body: some View {
            VStack {
            Text("View2")
        }
        .navigationBarTitle("Title View2",displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: backButton)
    }
}

Output:-

Answer 3

I've managed to localize back buttons by providing translations for the Back key in the Localizable.strings file.

I am using SwiftUI though.

Answer 4

Create your own button, then assign it using .navigationBarItems(). I found the following format most nearly approximated the default back button.

    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var backButton : some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }) {
            HStack(spacing: 0) {
                Image(systemName: "chevron.left")
                    .font(.title2)
                Text("Cancel")
            }
        }
    }

Make sure you use .navigationBarBackButtonHidden(true) to hide the default button and replace it with your own!

        List(series, id:\.self, selection: $selection) { series in
            Text(series.SeriesLabel)
        }
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: backButton)

Answer 5

Add localization to your project. If language was set with user device settings(or simulator), after you add localization to your project it will work. Project's supported language must match with selected one on device.

Answer 6

I found a solution which can work also very good.

View1 set a toolbar item with .principal and add your Text or what you want.

for example :

            ToolbarItem(placement: .principal) {
                HStack{
                    Text("View1")
                }.font(.subheadline)
            }

and set also your title in View1:

.navigationTitle("Back")

And do nothing in your view2. it will automatically add your view1 title to your view2 default back button text