如何在React-Navigation中更改标题文本和标签文本?

问题描述 投票:2回答:2

我在选项卡导航器中有一个嵌套的堆栈导航器,如下所示:

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(以红色圈出):

enter image description here

如何将标题和标签文本更改为相同的文本?

tldr;通过navigationOptions自定义标题只会更改标题文本,而不会更改标签导航器中嵌套堆栈导航器中的标签文本。如何更改标题和标签文本?

react-native react-navigation
2个回答
4
投票

一个解决方案


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


2
投票

我有两个重复的标题与@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);
© www.soinside.com 2019 - 2024. All rights reserved.