web-dev-qa-db-fra.com

Comment masquer l'en-tête de createStackNavigator sur React Native?

Je veux masquer l'en-tête car j'ai déjà stylé la barre d'outils dans le code:

import {createStackNavigator}
from 'react-navigation'
const AppStackNavigator = createStackNavigator ({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
})
class App extends Component {
render() {
  return (
  <AppStackNavigator initialRouteName='Home'/>`<br>
  );
  }
}
export default App;

Que dois-je ajouter à mon code?

react-nativestack-navigator
8
Just Ahead

mettre à jour votre code comme ce code

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage, 
        navigationOptions: {
            header: null,
        },
    },
})

et si vous ne voulez pas l'en-tête de tous les écrans,

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage,
    },
},
{
    navigationOptions: {
        header: null,
    },
})
33
Aravind S

Pour désactiver les en-têtes pour toutes les vues dans un createStackNavigator, vous pouvez utiliser l'option headerMode.

const AppStackNavigator = createStackNavigator({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
},
{
  headerMode: 'none',
})

Référence: StackNavigatorConfig - createStackNavigator - React Navigation

18
asukiaaa

Peux-tu essayer:

static navigationOptions = {
    header: null
}

À l'intérieur de votre composant d'écran.

2
Stiven Castillo

J'ai utilisé le code suivant pour masquer l'en-tête.

   {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack 

    }
1
Kishan Oza

Pour masquer les en-têtes pour des écrans spécifiques ou globalement, vous pouvez le faire

const StackNavigator = createStackNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {
            header: null // Will hide header for HomePage
        }
    }
}, {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack navigator,
        headerLeft: <HeaderLeft /> // Component to be displayed in left side of header (Generally it can be Hamburger)
        headerRight: <HeaderRight /> // Component to be displayed in right side of header
    }
})

Notez également que les paramètres spécifiques à l'écran remplaceront les paramètres globaux. J'espère que cela t'aides.

1
Mahesh Bhuva