SwiftUI WatchOS NavigationLink跳转后返回按钮仅显示箭头无文字

问题复现代码 #

ContentView #

struct ContentView: View {
    @StateObject var userSettingsStore = UserSettingsStore()
    
    var body: some View {
        MainMenuListView()
    }
}

MainMenuListView #

struct MainMenuListView: View {
    @EnvironmentObject var userSettingsStore: UserSettingsStore
    
    var body: some View {
        VStack {
            let menuItems = MenuOptions().menu
            List(menuItems) { item in
                NavigationLink(destination: MenuDestination(rawValue: item.id)?.view) {
                    MenuListRowView(imageName: item.imageName, menuItemName: item.name)
                }.navigationViewStyle(StackNavigationViewStyle())
            }
        }.navigationTitle("Sample Application")
    }
}

MenuDestination负责返回列表行对应的目标视图，点击第二行时会跳转至CustomView。

CustomView #

struct CustomView: View {
    @StateObject var viewModel: CustomViewModel
    
    var body: some View {
        VStack {
            HStack {
                Text("Books List")
                Spacer()
                Button(action: {}) {
                    Image(systemName: "calendar.circle").foregroundColor(Color(red: 32 / 255, green: 148 / 255, blue: 249 / 255))
                }.buttonStyle(PlainButtonStyle())
            }
            List(CustomMockData().booksList) { item in
                CustomRowView(bookItem: item)
            }
        }.onAppear() {
            self.viewModel.getBooksList()
        }
    }
}

异常效果：跳转后页面左上角仅显示<返回箭头，无返回文字、无当前页标题，截图如下：

应用入口代码 #

@main
struct myCustomApp: App {
    @WKExtensionDelegateAdaptor(ExtensionDelegate.self) var delegate
    @SceneBuilder var body: some Scene {
        WindowGroup {
            NavigationView {
                ContentView().environmentObject(UserSettingsStore())
            }
        }

        WKNotificationScene(controller: NotificationController.self, category: "myCategory")
    }
}

问题根因 #

• 修饰符位置错误：.navigationViewStyle(StackNavigationViewStyle())被错误写在NavigationLink上，该修饰符仅对最外层NavigationView生效，错放会直接破坏WatchOS导航栏的渲染逻辑。
• 目标视图缺失导航标题：WatchOS导航栈依赖每个页面的navigationTitle完成布局——返回按钮默认读取上一页的导航标题作为文字，当前页标题也需要显式声明，缺省状态下导航栏会自动收缩为仅显示箭头的样式。
• 额外适配规则：WatchOS屏幕宽度有限，如果上一页导航标题过长，系统也会自动隐藏返回按钮文字，仅保留箭头，属于正常适配逻辑。

修复方案 #

1. 删除NavigationLink上的.navigationViewStyle(StackNavigationViewStyle())，将其移动到应用入口最外层的NavigationView上：

@main
struct myCustomApp: App {
    @WKExtensionDelegateAdaptor(ExtensionDelegate.self) var delegate
    @SceneBuilder var body: some Scene {
        WindowGroup {
            NavigationView {
                ContentView().environmentObject(UserSettingsStore())
            }
            .navigationViewStyle(StackNavigationViewStyle())
        }

        WKNotificationScene(controller: NotificationController.self, category: "myCategory")
    }
}

2. 给CustomView添加.navigationTitle修饰符，标题长度尽量控制在2-4个汉字/单词，避免过长触发系统自动隐藏返回文字的逻辑：

struct CustomView: View {
    @StateObject var viewModel: CustomViewModel
    
    var body: some View {
        VStack {
            HStack {
                Text("Books List")
                Spacer()
                Button(action: {}) {
                    Image(systemName: "calendar.circle").foregroundColor(Color(red: 32 / 255, green: 148 / 255, blue: 249 / 255))
                }.buttonStyle(PlainButtonStyle())
            }
            List(CustomMockData().booksList) { item in
                CustomRowView(bookItem: item)
            }
        }
        .navigationTitle("书籍列表")
        .onAppear() {
            self.viewModel.getBooksList()
        }
    }
}

内容的提问来源于stack exchange，提问作者tech_human