我在选项卡导航器中有一个嵌套的堆栈导航器,如下所示:
const MainNavigator = createBottomTabNavigator({
BookmarksList: createStackNavigator({
BookmarkList: { screen: BookmarkList },
UpdateBookmark: { screen: UpdateForm }
}),
NewBookmark: createStackNavigator({
NewBookmark: { screen: NewBookmarkScreen }
})
});
当我为BookmarkList
设置navigationOptions标题文本时,它只会更改标题文本,而不会更改标签文本。
例如,我将BookmarkList
标题设置为My Bookmarks
。
class BookmarkList extends Component {
static navigationOptions = {
title: 'My Bookmarks'
};
}
这会反映在标题文本中,但不会显示在标签文本中,它仍然显示BookmarkList
(以红色圈出):
如何将标题和标签文本更改为相同的文本?
tldr;通过navigationOptions自定义标题只会更改标题文本,而不会更改标签导航器中嵌套堆栈导航器中的标签文本。如何更改标题和标签文本?
一个解决方案
const BookmarksList = createStackNavigator({ BookmarkList: { screen: BookmarkList }, UpdateBookmark: { screen: UpdateForm }, }); const NewBookmark = createStackNavigator({ NewBookmark: { screen: NewBookmarkScreen }, }); const MainNavigator = createBottomTabNavigator({ BookmarksList: { screen: BookmarksList, navigationOptions: { title: 'My Bookmarks', }, }, NewBookmark: { screen: NewBookmark, navigationOptions: { title: 'New Bookmarks', }, }, });
我有两个重复的标题与@aciobanita的解决方案,因为我有一个父AppContainer,有必要停用父的标题,然后使用@aciobanita的解决方案,它的作品对我没有问题
const AppNavigator = createStackNavigator(
{
MainApplication: {
screen: MainApplication,
},
},
{
headerMode: 'none'
}
);
export default createAppContainer(AppNavigator);
子组件:
const BookmarksList = createStackNavigator({
BookmarkList: { screen: BookmarkList },
UpdateBookmark: { screen: UpdateForm },
});
const NewBookmark = createStackNavigator({
NewBookmark: { screen: NewBookmarkScreen },
});
const MainNavigator = createBottomTabNavigator({
BookmarksList: {
screen: BookmarksList,
navigationOptions: {
title: 'My Bookmarks',
},
},
NewBookmark: {
screen: NewBookmark,
navigationOptions: {
title: 'New Bookmarks',
},
},
});
export default createAppContainer(MainNavigator);