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

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

    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'
      />
    ),
  };

react-native reactjs react-native-tabnavigator react-native-tab-view react-native-drawer
person GAURAV    schedule 19.06.2018    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Одним из способов было бы использовать навигацию 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, чтобы обернуть компонент и получить оттуда реквизит.

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

person Gian Marco Toso    schedule 19.06.2018
comment
Спасибо @juandemarco. Сэр, ваше решение работает на 100%. - person GAURAV; 20.06.2018
comment
Рад помочь! :) - person Gian Marco Toso; 20.06.2018
comment
Привет, @juandemarco, я уже использую static navigationOptions = ({navigation}) =› ({ /* ... */ }), но это не меняет заголовок, я хочу изменить заголовок на основе переданных параметров, `` ` static navigationOptions = ({ navigation }) =› { return { title: navigation.getParam('providerName'), }; } render() { return ( ‹View style={styles.container}› {console.log(@name, this.props.navigation.getParam('providerName'))} // я могу получить имя здесь ‹/View › ); } - person DevAS; 02.05.2019