如何从 react-native 应用程序中的构造函数更改导航选项中的 Header 标题?
How to change Header title in navigationOptions from constructor in react-native app?
在我的 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>
);
}
当我单击选项卡时,它会更改状态,然后我得到 _renderTab 函数返回的新组件。一切正常,但我想根据 _renderTab 函数返回的组件更改 Header 标题。
我应该怎么办?有没有办法从构造函数中更改 Header 标题?
下面是我在 SwitchAccount 页面中的 navigationOptions 代码。我想从构造函数更改标题。
static navigationOptions = {
title:'Filter',
drawerLabel: 'Switch Account',
drawerIcon: ({ tintColor }) => (
<Icon
name='md-switch'
size={40}
color='black'
/>
),
};
一种方法是使用导航 params
。 navigationOptions
可以定义为一个函数(而不是 object),它接收一个包含 navigation
object 本身作为其键之一的 object:
static navigationOptions = ({navigation}) => ({ /* ... */ })
这允许您通过从 navigation
object:
中读取参数来动态设置标题
static navigationOptions = ({navigation}) => ({
title: navigation.getParam('title', 'DefaultTitle'),
/* ... */
})
您可以在其中一个组件中调用 navigation
object 上的 setParams
函数来设置标题:
handleChangeTab = (tab) => {
/* Your tab switching logic goes here */
this.props.navigation.setParams({
title: getTitleForTab(tab)
})
}
请注意,组件必须由 react-navigation
安装才能访问 navigation
属性,否则您必须从 parent 或使用 withNavigation
HoC 包装组件并让它从那里接收道具。
那么,您考虑过使用 Tab navigation 吗?
在我的 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>
);
}
当我单击选项卡时,它会更改状态,然后我得到 _renderTab 函数返回的新组件。一切正常,但我想根据 _renderTab 函数返回的组件更改 Header 标题。 我应该怎么办?有没有办法从构造函数中更改 Header 标题? 下面是我在 SwitchAccount 页面中的 navigationOptions 代码。我想从构造函数更改标题。
static navigationOptions = {
title:'Filter',
drawerLabel: 'Switch Account',
drawerIcon: ({ tintColor }) => (
<Icon
name='md-switch'
size={40}
color='black'
/>
),
};
一种方法是使用导航 params
。 navigationOptions
可以定义为一个函数(而不是 object),它接收一个包含 navigation
object 本身作为其键之一的 object:
static navigationOptions = ({navigation}) => ({ /* ... */ })
这允许您通过从 navigation
object:
static navigationOptions = ({navigation}) => ({
title: navigation.getParam('title', 'DefaultTitle'),
/* ... */
})
您可以在其中一个组件中调用 navigation
object 上的 setParams
函数来设置标题:
handleChangeTab = (tab) => {
/* Your tab switching logic goes here */
this.props.navigation.setParams({
title: getTitleForTab(tab)
})
}
请注意,组件必须由 react-navigation
安装才能访问 navigation
属性,否则您必须从 parent 或使用 withNavigation
HoC 包装组件并让它从那里接收道具。
那么,您考虑过使用 Tab navigation 吗?