Question

在我的react-native项目中，我使用了DrawerNavigator，我从中导航到SwitchAccount页面。在SwitchAccount页面中，我使用了来自react-native-tabs的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>
    ); 
  }

当我点击tab然后它改变状态然后我得到_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'),
    /* ... */
})

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

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

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

请注意，组件必须已由react-navigation挂载，才能访问navigation道具，否则，您必须从其父级传递它，或使用{{1} } HoC封装组件并从那里接收道具。

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

如何在react-native app中的构造函数中更改navigationOptions中的标题标题？

1 个答案: