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


137

J'essaye de changer d'écran en utilisant le navigateur de pile et d'onglet.

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

Dans ce cas, stacknavigator est utilisé en premier, puis tabnavigator. et je veux masquer les en-têtes du navigateur de pile. WIl ne fonctionne pas correctement lorsque j'utilise des options de navigation comme:

navigationOptions: { header: { visible: false } }

J'essaye ce code sur les deux premiers composants qui utilisent dans stacknavigator. si j'utilise cette ligne, j'obtiens une erreur comme ::

entrez la description de l'image ici

Réponses:


330

MISE À JOUR à partir de la version 5

A partir de la version 5 , il est l'option headerShowndansscreenOptions

Exemple d'utilisation:

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

Si vous souhaitez masquer uniquement l'en-tête sur 1 écran, vous pouvez le faire en définissant les options screenOptions sur le composant écran, voir ci-dessous par exemple:

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

Voir aussi le blog sur la version 5

MISE
À JOUR À partir de la version 2.0.0-alpha.36 (07/11/2019),
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

J'utilise ceci pour masquer la barre de pile (notez que c'est la valeur du deuxième paramètre):

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

Lorsque vous utilisez cette méthode, elle sera masquée 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,
  }
 }
);

Fonctionne parfaitement! merci pour votre réponse, mais j'ai un problème après avoir ajouté ceci: le passage de stacknavigator à tabnavigator fonctionne bien. si je veux afficher l'en-tête lorsque je change d'écran de tabnavigator à stacknaviagtor, que dois-je faire?
Avijit Dutta

2
Hmm, c'est une excellente question. Pour être honnête, je ne le sais pas. Vous pouvez essayer la réponse @Dpkstr sur l'écran que vous souhaitez afficher, au lieu de null, ce serait vrai.
Perry

Hmm, j'ai déjà essayé cela mais cela ne fonctionnait pas non plus ... merci pour votre première réponse. Je vais faire la deuxième fonctionnalité en utilisant un bouton juste pour le moment.
Avijit Dutta

comment afficher et masquer dynamiquement l'en-tête lorsque vous cliquez sur le bouton à l'intérieur du composant. Si nous donnons static navigationOptions = {header: null}. Je cacherai complètement l'en-tête. Je veux afficher ou masquer lorsque je clique sur un bouton
Venkatesh Somu

1
S'il veut masquer l'en-tête pour un écran spécifique dans la v5 +, il devrait utiliser un optionsaccessoire comme celui-ci<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Oliver D

130

Utilisez simplement le code ci-dessous dans la page dont vous souhaitez masquer l'en-tête

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

voir Stack Navigator


Cela fonctionne bien, mais un problème est que lorsque l'écran passe à tabNavigator de stacknavigator (selon la mention sur ma question, des composants tels que l'écran de vérification OTP pour répertorier l'écran à ce moment-là, les deux en-têtes s'affichent
Avijit Dutta

Pouvez-vous me dire comment vous naviguez exactement vers List
Dpkstr

22

Ajoutez simplement ceci dans votre extrait de code de classe / composant et l'en-tête sera masqué

 static navigationOptions = { header: null }

16

Si votre écran est un composant de classe

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

codez ceci dans votre écran ciblé comme première méthode (fonction).


1
à droite, header: () => nullc'est la bonne façon, sinon vous obtenez un pépin d'en-tête lors du chargement de la page
Cristian Tr

11

Si vous souhaitez vous cacher sur un écran spécifique, procédez comme suit:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

10

J'utilise header : nullau lieu d' header : { visible : true }utiliser cli react-native. voici l'exemple:

static navigationOptions = {
   header : null   
};

10

Dans la solution donnée, l'en-tête est masqué pour HomeScreen by- options = {{headerShown: false}}

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

9

Ajoutez un nouvel objet navigationOptions dans le stackNavigator.

Essaye ça :

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

J'espère que ça aide.


7

Si quelqu'un cherche comment basculer l'en-tête dans componentDidMount, écrivez quelque chose comme:

  this.props.navigation.setParams({
      hideHeader: true,
  });

Quand

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

Et quelque part lorsque l'événement termine le travail:

this.props.navigation.setParams({
  hideHeader: false,
});

6

Cela a fonctionné pour moi:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

4

Dans votre écran ciblé, vous devez coder ceci!

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }

4

Vous pouvez masquer l'en-tête comme ceci:

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

3

Cela fonctionne pour la navigation dans la pile

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>

2

Si vous ne souhaitez le supprimer que d'un écran, react-native-navigationalors:

<Stack.Navigator>
    <Stack.Screen 
            name="Login" 
            component={Login} 
            options= {{headerShown: false}} />
</Stack.Navigator>

1
const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

1

Toutes les réponses montrent comment le faire avec des composants de classe, mais pour les composants fonctionnels, vous le faites:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

Si vous supprimez l'en-tête, votre composant peut se trouver à des endroits où vous ne pouvez pas le voir (lorsque le téléphone n'a pas d'écran carré), il est donc important de l'utiliser lors de la suppression de l'en-tête.


1
const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

1
 <Stack.Screen
    name="SignInScreen"
    component={Screens.SignInScreen}
    options={{ headerShown: false }}
  />

options={{ headerShown: false }} travaille pour moi.

** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",


1

Dans react navigation 5.x, vous pouvez masquer l'en-tête de tous les écrans en définissant l' headerModeaccessoire du Navigatorsur false.

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

1

Vous pouvez masquer l'en-tête StackNavigator comme ceci:

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}

0

Il est important de faire correspondre la version de la bibliothèque de navigation de réaction que vous utilisez à la solution, car elles sont toutes différentes. Pour ceux qui utilisent encore react-navigation v1.0.0 pour une raison comme moi, les deux ont fonctionné:

Pour désactiver / masquer l'en-tête sur des écrans individuels:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

Pour désactiver / masquer tous les écrans à la fois, utilisez ceci:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

0

Dans la dernière version de react-navigation, cela fonctionne pour masquer l'en-tête sur chaque écran: headerMode = {'none'}

<Stack.Navigator
headerMode={'none'}
>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>


0

pour 4.x, le header: nullest obsolète, devrait utiliser à la headerShown: falseplace

ex:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

0
  1. Pour l'écran unique, vous pouvez définir l'en- tête: null ou headerShown: false dans createStackNavigator comme ceci

    const App = createStackNavigator({
     First: {
    screen: Home,
    navigationOptions: {
      header: null,
                       },
           },
    });
  2. Masquer l'en-tête de tous les écrans en une seule fois en utilisant defaultNavigationOptions

    const App = createStackNavigator({
    
    First: {
      screen: HomeActivity,
    },
    },
    
    {
    defaultNavigationOptions: {
      header: null
    },
    
    });

0

si vous voulez supprimer l'en-tête de tous les écrans, allez à app.js et ajoutez ce code à Stack.Navigator

screenOptions={ { headerShown: false } }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.