Как изменить заголовок заголовка в navigationOptions из конструктора в приложении-родном приложении?

Question

В моем реактивном проекте я использую DrawerNavigator, из которого я перехожу на страницу SwitchAccount. На странице SwitchAccount я использую вкладки от реагирующих родных вкладок. Ниже приведен код, где я использую

    render() {
      return (
     <View style={[styles.container]}>
      // Here _renderTab function return component based on selectedService
      {this._renderTab(this.state.selectedService)} 
      <TabBarContainer
          selectedService={this.state.selectedService}
          onTabChange={this._switchService}
        />
     </View>
    ); 
  }

Когда я нажимаю на вкладку, она меняет состояние, а затем я получаю новый компонент, возвращаемый функцией _renderTab. Все работает правильно, но я хочу изменить заголовок заголовка на основе компонента, возвращаемого функцией _renderTab. Что я должен делать? Есть ли способ изменить заголовок заголовка из конструктора? Ниже приведен мой код для navigationOptions на странице SwitchAccount. Там я хочу изменить заголовок из конструктора.

    static navigationOptions = {
    title:'Filter',
    drawerLabel: 'Switch Account',
    drawerIcon: ({ tintColor }) => (
      <Icon
        name='md-switch'
        size={40}
        color='black'
      />
    ),
  };

Answer 1

Одним из способов было бы использовать навигацию params, navigationOptions может быть определена как функция (вместо объекта), которая получает объект, содержащий navigation Сам объект как один из его ключей:

static navigationOptions = ({navigation}) => ({ /* ... */ })

Это позволяет динамически устанавливать заголовок, читая параметр из navigation объект:

static navigationOptions = ({navigation}) => ({
    title: navigation.getParam('title', 'DefaultTitle'),
    /* ... */
})

Внутри одного из вас компонентов вы можете вызвать setParams функция на navigation Объект для установки заголовка:

handleChangeTab = (tab) => {
    /* Your tab switching logic goes here */

    this.props.navigation.setParams({
        title: getTitleForTab(tab)
    })
} 

Обратите внимание, что компонент должен быть смонтирован react-navigation для того, чтобы иметь доступ к navigation проп, иначе вам придется либо передать его от родителя, либо использовать withNavigation HoC, чтобы обернуть компонент и заставить его получить опору оттуда.

Тем не менее, вы рассматривали возможность использования навигации по Tab?