Comment masquer l'entête de la navigation StackNavigator dans React ?
React Native est un framework permettant d'écrire des applications mobiles pour iOS ou Android avec le langage JavaScript. Cela permet à un développeur maîtrisant déjà React de travailler pour une application mobile, sans devoir apprendre un nouveau langage et framework. Il existe des librairies pour ces frameworks qui fournissent des composants prêts à l'emploi pour accélérer le développement de l'application. Parmi ceux-ci, la librairie React Navigation permet de créer des composants qui facilitent la navigation au sein de l'application, en respectant la charte graphique du système d'exploitation. Le composant "StackNavigator" permet d'empiler les vues qui s'enchaînent les unes à la suite des autres. Il s'agit du type de navigation le plus populaire. Si vous le souhaitez, vous pouvez masquer l'entête affiché par le composant.
Pour masquer l'entête, les développeurs du composant ont créé une option spécifique. Le nom de cette option dépend de la version de la librairie React Navigation. À partir de la version 5, on utilise l'option "headerShown". Si on le configure au niveau du composant, l'entête sera masqué dans l'ensemble de l'application.
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen name="nom-de-la-route" component={MonComposant} />
</Stack.Navigator>
Si vous ne souhaitez masquer l'entête que pour un seul écran, alors le paramétrage doit se faire dans la balise "Stack.Screen".
<Stack.Screen options={{headerShown: false}} name=" nom-de-la-route" component={ MonComposant } />
Avant la version 5, l'option ne peut se configurer qu'au sein du constructeur du composant. On utilise alors deux options différentes. L'option "headerMode" définit la façon dont sera affiché l'entête, alors que l'option "headerVisible" indique si l'on voit l'entête lors de la transition entre les écrans.
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}