So ändern Sie Kopf -, text-und tab-text Reagieren-Navigation?

Ich habe eine verschachtelte Stapel navigator auf einem tab-navigator-wie so:

const MainNavigator = createBottomTabNavigator({
  BookmarksList: createStackNavigator({
    BookmarkList: { screen: BookmarkList },
    UpdateBookmark: { screen: UpdateForm }
  }),
  NewBookmark: createStackNavigator({
    NewBookmark: { screen: NewBookmarkScreen }
  })
});

Wenn ich navigationOptions Titel text für BookmarkList, es ändert sich nur die header-text, aber nicht die tab-text.

Zum Beispiel, habe ich meine BookmarkList Titel zu My Bookmarks.

class BookmarkList extends Component {
  static navigationOptions = {
    title: 'My Bookmarks'
  };    
}

Dieser Niederschlag in den header-text, aber nicht in den tab text, die sagt immer noch BookmarkList (rot eingekreist):

So ändern Sie Kopf -, text-und tab-text Reagieren-Navigation?

Wie bekomme ich Kopf-und tab-text zu ändern, um den gleichen text?

tldr; Anpassung Titel über navigationOptions ändert nur die überschrift, aber nicht die Registerkarte text-in geschachtelten stack-navigator im Register navigator. So ändern Sie Kopf-und tab-text?

  • Zur Registerkarte „ändern“ – text verwenden tabBarLabel im TabNavigator ist navigationOptions. Siehe docs für die Referenz
InformationsquelleAutor doctopus | 2018-05-08



2 Replies
  1. 4

    One-Lösung:

     
    const BookmarksList = createStackNavigator({ 
    BookmarkList: { Bildschirm: BookmarkList }, 
    UpdateBookmark: { Bildschirm: UpdateForm }, 
    }); 
    
    const NewBookmark = createStackNavigator({ 
    NewBookmark: { Bildschirm: NewBookmarkScreen }, 
    }); 
    
    const MainNavigator = createBottomTabNavigator({ 
    BookmarksList: { 
    Bildschirm: BookmarksList, 
    navigationOptions: { 
    Titel: 'My Bookmarks', 
    }, 
    }, 
    NewBookmark: { 
    Bildschirm: NewBookmark, 
    navigationOptions: { 
    Titel: 'Neue Lesezeichen', 
    }, 
    }, 
    }); 
    
    
  2. 2

    Hatte ich zwei doppelte Kopfzeilen mit der Lösung von @aciobanita, weil ich ein Elternteil AppContainer, ist es notwendig, deaktivieren Sie den header des übergeordneten und verwenden Sie dann die Lösung von @aciobanita, seine funktioniert bei mir ohne problem

    const AppNavigator = createStackNavigator(
      {
        MainApplication: { 
          screen: MainApplication,
        },
      },
      {
        headerMode: 'none'
      }
    );
    
    export default createAppContainer(AppNavigator);
    

    Kind Komponente:

        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);
    

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.