web-dev-qa-db-fra.com

comment afficher les en-têtes dans Reaction Navigation avec TabNavigation

J'ai remarqué que les vues dans StackNavigation montrent le titre de l'en-tête mais si je définis ces mêmes écrans dans un TabNavigation, il n'affiche pas d'en-tête. Il affiche uniquement un en-tête si j'encapsule un StackNavigation soit autour de chaque onglet, soit encapsule le TabNavigation imbriqué dans un StackNavigation.

Pourquoi les écrans de TabNavigation ne montrent-ils pas d'en-tête - est-ce le comportement attendu? Si c'est le cas, est-il préférable d'avoir un StackNavigation dans chaque onglet, ou un gros StackNavigation autour du TabNavigation?

// la navigation dans les onglets n'affiche pas de titre d'en-tête dans chaque écran

const TabsNavigator = TabNavigator({
  Home: {
    screen:HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
  navigationOptions: {
    header: {
      visible: true,
    },
  },
});

L'en-tête s'affiche lorsque je l'enveloppe dans un StackNavigator

default StackNavigator({
  Home: { screen: TabsNavigator },
});

Ou est-il préférable de le faire de cette façon

 export TabsNavigator = TabNavigator({
      Home: {
        screen:StackNavigator({
          Home: { screen: HomeScreen },
        }),
      },
      Profile: {
        screen: StackNavigator({Profile: {screen: ProfileScreen}}),
      },
    }, {
      tabBarOptions: {
        activeTintColor: '#e91e63',
      },
      navigationOptions: {
        header: {
          visible: true,
        },
      },
    });
react-nativereact-navigation
26
MonkeyBonkey

Même si c'est une question assez ancienne, je me suis posé cette question il y a quelques jours, donc je vais ajouter mes deux cents à ce sujet en espérant que cela sera utile à quelqu'un d'autre à l'avenir également.

React Navigation est un produit étonnant avec une grande quantité de personnalisation, mais cela s'avère parfois parfois déroutant, ce qui s'applique également à certaines sections de la documentation. navigationOptions à partir des états de la version actuelle, est commun à tous les écrans mais la "liste des options de navigation disponibles dépend du navigateur auquel l'écran est ajouté." https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator d'où l'option header ne fonctionne pas car elle n'est pas disponible pour TabNavigator lui-même.

En ce qui concerne votre question sur la meilleure approche, cela dépend de ce que vous voulez accomplir avec la navigation pour votre application elle-même. Si vous placez votre TabNavigator dans un StackNavigator, le composant d'en-tête sera commun à tous les onglets à l'intérieur du TabNavigator, ce qui signifie que la transition entre les onglets prendra effet mais l'en-tête l'emportera ' t se déplacer de sa position supérieure. Si vous choisissez d'autre part d'imbriquer un StackNavigator dans chaque onglet, l'en-tête s'affichera dans chaque onglet, ce qui signifie que l'en-tête se déplacera le long de l'animation de transition d'onglet.

J'ai fait un rapide démo pour que vous puissiez voir la différence, le code est également disponible si vous voulez jouer avec.

11
Juan Carlos Alpizar Chinchilla

Selon React-Navigation TabNavigator Docs il n'y a pas d'option navigation navigation. Par conséquent, lorsque vous écrivez le code suivant, vous définissez en fait une valeur inexistante, ce que vous faites n'affecte donc rien.

navigationOptions: {
  header: { visible: true },
}

Malheureusement, vous avez besoin d'un StackNavigator dans cette situation.

0
H. Tugkan Kibar