web-dev-qa-db-fra.com

Supprimer la barre de navigation supérieure pour certains écrans

Existe-t-il un moyen de supprimer la barre de navigation supérieure pour des écrans spécifiques uniquement? J'utilise react-navigation.

J'ai déjà essayé ce qui suit:

header: { visible: false }

mais cela ne fait que masquer la barre de navigation. L'espace de la barre de navigation n'est toujours pas utilisable.

Merci d'avance!

react-nativereact-navigation
9
Jed

Voici un exemple de la façon dont j'ai fait le mien en utilisant StackNavigator:

const stackN = StackNavigator({
    Screen1 : {
      screen: Screen1,
      navigationOptions: {
        header: null,
      }
    },
    Home : {
      screen: HomeScreen,
      navigationOptions: ({navigation}) => ({
        title: 'Home',
        headerStyle: styles.headerStyle,
        headerTitle: <Text>Home</Text>,
        headerLeft : null,
        headerRight: null,
      })
    }, 
}, {headerMode: 'screen'})

Ainsi, chaque écran a ses propres options de navigation. Il existe peut-être un moyen de partager les options de navigation, mais je n'y ai pas encore réfléchi.

31
rabbit87

Lorsque vous utilisez createStackNavigator, la barre de navigation supérieure peut être supprimée comme ci-dessous.

const AppStack = createStackNavigator({ Home: MainTabNavigator }, { headerMode: 'none' });
4
Spydy

Utilisation navigationOptions: { header: null } pour supprimer la barre de navigation supérieure.

Exemple de code:

import { createStackNavigator, createAppContainer } from 'react-navigation';

import {Login} from './app/components/login/Login';
import {Register} from './app/components/register/Register';
import {Home} from './app/components/home/Home';

const AppNavigator = createStackNavigator(
    {
        Login: { 
                  screen: Login,
                  navigationOptions: {
                    header: null,
                  }
               },
        Register: { 
                    screen: Register, 
                    navigationOptions: {
                      header: null,
                    }  
                  },
        Home: { 
                screen: Home, 
                navigationOptions: {
                  header: null,
                }
              },
    },
    {
        initialRouteName: "Login"
    }
);

export default createAppContainer(AppNavigator);
3
Codemaker