Bottom Tab Navigator (Onglet de navigation inférieur)

Naviguez vers différents écrans à l'aide d'un navigateur à onglets en bas de page.

Vue d'ensemble

• Ajout de navigateurs

• Propriétés du navigateur à onglets

• Ajouter des étiquettes et des icônes

Les onglets du bas sont une façon populaire de naviguer dans une application aujourd'hui

Ajout de navigateurs

Pour ajouter un navigateur à votre application, vous devez faire glisser le composant navigateur dans votre arborescence de composants, puis faire glisser un écran au dessus du composant navigateur.

Propriétés du navigateur à onglets

Vous disposez de nombreuses options pour donner du style à votre navigateur de l'onglet inférieur, comme par exemple changer la couleur de fond ou la couleur de teinte. Voici les différentes options de personnalisation :

Propriétés simples

• Active Tint Color : sélectionnez une couleur de police pour l'onglet actuellement utilisé.

• Active Background Color: sélectionnez une couleur pour l'onglet actuellement utilisé.

• Inactive Tint Color: sélectionnez une couleur pour le texte des onglets qui ne sont pas utilisés.

• Inactive Background Color : sélectionnez une couleur pour l'onglet qui n'est pas utilisé actuellement.

• ShowLabel : Permet d'afficher ou non les étiquettes des onglets dans le navigateur d'onglets.

• ShowIcon : permet d'afficher ou non les icônes dans l'onglet Navigateur.

Ajout d'étiquettes et d'icônes à votre onglet

Lors de la conception d'un onglet, vous pouvez utiliser des mots ou des images pour guider les utilisateurs vers les différents écrans.

Instructions étape par étape

Étape 1. Ajoutez des écrans à un Navigateur en les faisant glisser et en les déposant sur un Navigateur.

Étape 2. Sélectionnez l'onglet Bottom Tab Navigator. Décidez si vous souhaitez afficher des icônes ou des étiquettes en cliquant sur ces boutons :

Étape 3. Selon que vous ajoutez des icônes ou des étiquettes, sélectionnez l'écran que vous souhaitez styliser et téléchargez une image ou ajoutez du contenu :

Vous trouverez ci-dessous des descriptions supplémentaires :

• TabBarLabel : Le nom de votre étiquette d'onglet

• ActiveTabIcon : Icône qui apparaît lorsque l'onglet est sélectionné ; Vous pouvez télécharger une image pour cette icône.

• InactiveTabIcon : Icône qui apparaît lorsque l'onglet n'est pas sélectionné ; Vous pouvez télécharger une image pour cette icône.

Onglet inférieur Visibilité du navigateur

Pour que le navigateur de l'onglet inférieur soit visible, le commutateur TabBarVisible doit être réglé sur true. Si le commutateur TabBar est visible est réglé sur false, le navigateur de l'onglet inférieur ne sera pas visible dans votre application.