Как изменить текст заголовка и текст вкладки в React-Navigation?

Question

У меня есть навигатор с вложенными стеками в навигаторе вкладок, например:

const MainNavigator = createBottomTabNavigator({
  BookmarksList: createStackNavigator({
    BookmarkList: { screen: BookmarkList },
    UpdateBookmark: { screen: UpdateForm }
  }),
  NewBookmark: createStackNavigator({
    NewBookmark: { screen: NewBookmarkScreen }
  })
});

Когда я устанавливаю текст заголовка navigationOptions для BookmarkList, он изменяет только текст заголовка, но не текст вкладки.

Например, я установил для моего BookmarkList заголовка значение My Bookmarks.

class BookmarkList extends Component {
  static navigationOptions = {
    title: 'My Bookmarks'
  };    
}

Это отражается в тексте заголовка, но не в тексте вкладки, который по-прежнему гласит BookmarkList (обведено красным):

Как мне получить заголовок и текст вкладки, чтобы они изменились на один и тот же текст?

tldr; Настройка заголовка с помощью navigationOptions изменяет только текст заголовка, но не текст вкладки в навигаторе с вложенными стеками в навигаторе вкладок. Как изменить заголовок и текст вкладки?

Answer 1

У меня было два дублирующих заголовка с решением @aciobanita, потому что у меня есть родительский AppContainer, необходимо деактивировать заголовок родительского и затем использовать решение @aciobanita, оно работает для меня без проблем

const AppNavigator = createStackNavigator(
  {
    MainApplication: { 
      screen: MainApplication,
    },
  },
  {
    headerMode: 'none'
  }
);

export default createAppContainer(AppNavigator);

Дочерний компонент:

    const BookmarksList = createStackNavigator({
      BookmarkList: { screen: BookmarkList },
      UpdateBookmark: { screen: UpdateForm },
    });

    const NewBookmark = createStackNavigator({
      NewBookmark: { screen: NewBookmarkScreen },
    });

    const MainNavigator = createBottomTabNavigator({
      BookmarksList: {
        screen: BookmarksList,
        navigationOptions: {
          title: 'My Bookmarks',
        },
      },
      NewBookmark: {
        screen: NewBookmark,
        navigationOptions: {
          title: 'New Bookmarks',
        },
      },
    });


export default createAppContainer(MainNavigator);

Answer 2

Одно решение:

    const BookmarksList = createStackNavigator({
      BookmarkList: { screen: BookmarkList },
      UpdateBookmark: { screen: UpdateForm },
    });

    const NewBookmark = createStackNavigator({
      NewBookmark: { screen: NewBookmarkScreen },
    });

    const MainNavigator = createBottomTabNavigator({
      BookmarksList: {
        screen: BookmarksList,
        navigationOptions: {
          title: 'My Bookmarks',
        },
      },
      NewBookmark: {
        screen: NewBookmark,
        navigationOptions: {
          title: 'New Bookmarks',
        },
      },
    });