如何在React-Navigation中同时修改头部文本与标签文本？

嘿，这个问题我太熟悉了！你碰到的是React Navigation嵌套导航里一个典型的误区——你给栈导航器内部的屏幕设置navigationOptions.title，只会修改栈自身的顶部导航栏标题，而底部标签栏的文本是由外层的标签导航器来管控的。

怎么修改？直接在外层Tab Navigator的配置里设置标签文本就行！ #

调整你的代码，给BookmarksList这个Tab项添加navigationOptions来指定标签文本：

const MainNavigator = createBottomTabNavigator({
  BookmarksList: {
    // 内层栈导航器保持不变
    screen: createStackNavigator({
      BookmarkList: { 
        screen: BookmarkList,
        navigationOptions: {
          title: "My Bookmarks" // 这个控制的是栈页面的头部标题
        }
      },
      UpdateBookmark: { screen: UpdateForm }
    }),
    // 重点在这里！给Tab项设置标签文本
    navigationOptions: {
      tabBarLabel: "My Bookmarks"
    }
  },
  NewBookmark: {
    screen: createStackNavigator({
      NewBookmark: { screen: NewBookmarkScreen }
    }),
    // 你也可以给这个Tab设置自定义标签
    navigationOptions: {
      tabBarLabel: "New Bookmark"
    }
  }
});

为什么原来的方法没用？ #

简单来说：内层的栈导航器是作为外层标签导航器的一个“子屏幕”存在的。标签栏的所有属性（包括文本、图标）都是属于外层标签导航器的配置范畴，内层栈的navigationOptions只能作用于栈自己的顶部导航栏，根本碰不到外层的标签栏。

如果之后需要动态修改标签文本，还可以用navigation.setParams结合函数式的navigationOptions来实现，但静态修改的话上面的方法就足够啦。

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