reactjs - 如何从react-native应用程序的构造函数更改navigationOptions中的标题标题？

Question

在我的 react native 项目中，我使用了 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 函数返回的组件更改标题标题。 我应该怎么办？有什么方法可以从构造函数更改标题标题吗？ 下面是我在 SwitchAccount 页面中的 navigationOptions 代码。我想从构造函数更改标题。

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

在其中一个组件中，您可以调用 navigation 对象上的 setParams 函数来设置标题:

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

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

请注意，该组件必须已由 react-navigation 挂载才能访问 navigation 属性，否则您必须从其组件传递它父级或使用 withNavigation HoC 来包装组件并让它从那里接收 prop。

也就是说，您是否考虑过使用 Tab navigation ？