Masquer l'en-tête dans le navigateur de la pile Navigation React

Question

J'essaie de changer d'écran en utilisant à la fois la pile et le navigateur à onglets.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

Dans ce cas, on utilise d'abord le navigateur de pile, puis le navigateur de tabulation, et je veux masquer les en-têtes du navigateur de pile. Cela ne fonctionne pas correctement lorsque j'utilise des options de navigation comme: :

navigationOptions: { header: { visible: false } }

J'essaie ce code sur les deux premiers composants qui sont utilisés dans le stacknavigator. Si j'utilise cette ligne, j'obtiens une erreur du type : :

Answer 1

MISE À JOUR à partir de la version 5

A partir de la version 5, c'est l'option headerShown sur screenOptions

Exemple d'utilisation :

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

Si vous ne voulez masquer l'en-tête que sur un seul écran, vous pouvez le faire en définissant les options d'écran sur le composant d'écran (voir l'exemple ci-dessous) :

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

Voir également le blog à propos de la version 5

UPDATE
À partir de la version 2.0.0-alpha.36 (2019-11-07),
il existe une nouvelle option de navigation : headershown

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

Ancienne réponse

Je l'utilise pour masquer la barre de la pile (remarquez que c'est la valeur du deuxième paramètre) :

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

Lorsque vous utilisez cette méthode, il sera caché sur tous les écrans.

Dans votre cas, cela ressemblera à ceci :

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

Answer 2

Sur la v4, il suffit d'utiliser le code ci-dessous dans la page où vous voulez cacher l'en-tête.

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

se référer à Navigateur de piles

Answer 3

Dans la solution donnée, l'en-tête est caché pour HomeScreen par options={{headerShown:false}} (en anglais)

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

Answer 4

Ajoutez simplement ceci dans votre classe/composant et l'en-tête sera caché.

 static navigationOptions = { header: null }

Answer 5

Sur react navigation 5.x vous pouvez masquer l'en-tête pour tous les écrans en définissant l'attribut headerMode prop de la Navigator a false .

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>