web-dev-qa-db-fra.com

React-Navigation: Impossible de masquer l'en-tête avec les navigateurs imbriqués

J'utilise le fonctionnaire react-navigation pour gérer ma navigation. J'ai un TabNavigator principal pour l'application entière avec deux onglets (appelés HitchhikingMapNavigator et SettingsNavigator ci-dessous), et chaque onglet a un StackNavigator imbriqué:

const HitchhikingMapNavigator = StackNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  spotDetails: { screen: SpotDetailsViewContainer }
}, {
  navigationOptions: {
    header: {
      visible: false
    }
  }
});

const SettingsNavigator = StackNavigator({
  // some other routes
});

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapNavigator },
  settings: { screen: SettingsNavigator }
}, {
  navigationOptions: {
    header: {
      visible: false,
    },
 },
});

Comme vous pouvez le constater, la visibilité des en-têtes est définie sur false partout, même à ma vue HitchhikingMapViewContainer:

class HitchhikingMapView extends React.Component {

  static navigationOptions = {
    title: 'Map',
    header: {
      visible: false,
    },
    //...other options
  }

Et pourtant, la barre d'en-tête est toujours visible:

 screenshot

Si je ne niche pas les navigateurs (c’est-à-dire si je mets ce code, ignore le niché):

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  settings: { screen: SettingsNavigator }
});

alors l'en-tête est correctement masqué.

Donc conclusion: je ne peux pas rendre un en-tête non visible quand j'ai deux navigateurs imbriqués. Des idées?

javascriptreact-nativereact-navigation
10
amaurymartiny

Pour ceux qui cherchent encore la réponse, je la posterai ici.

Donc deux solutions:

1ère solution: utilisez headerMode: 'none' dans StackNavigator. Cela supprimera l’en-tête de TOUS les écrans du StackNavigator.

2ème solution: utilisez headerMode: 'screen' dans StackNavigator et ajoutez header: { visible: false } dans navigationOptions des écrans où vous souhaitez masquer l'en-tête.

Plus d'informations peuvent être trouvées ici: https://reactnavigation.org/docs/fr/stack-navigator.html

15
amaurymartiny

À partir de v1.0.0-beta.9, utilisez ce qui suit,

static navigationOptions = {
    header: null
}
10
h--n

Cela a fonctionné pour moi:

headerMode: 'none'
2
Peter

Cela fonctionne pour moi pour cacher la navigation:

static navigationOptions = {
    header: null
 };
0
ramkrishna samanta

J'ai le même problème dans "react-navigation": "^ 3.0.9". Quelle est la solution s'il vous plaît?

Mon code:

    const MontanteStack = createStackNavigator(
    {
        Montante: {
            screen: MontanteTab,
            navigationOptions: ({navigation}) => ({
                header: null,
            }),
        },
        PronosticsDetails: {
            screen: PronosticsDetailsScreen,
            navigationOptions: ({navigation}) => ({
                headerMode: 'screen',
                headerTitle: 'Pronostics détails',
                headerStyle: {
                    backgroundColor: '#000000',
                    textAlign: 'center',
                },
                headerTintColor: '#ffffff',
                headerTitleStyle: {
                    color: '#c7943e',
                    textAlign: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flex: 1,
                }
            }),
        },
    },
    {
        initialRouteName: 'Montante',
    }
);

export default createAppContainer(MontanteStack);

Je voudrais masquer la barre supérieure et les onglets car ils sont affichés au-dessus du titre de PronosticsDetailsScreen

0
ElGecko_76

Cela a fonctionné pour moi, je travaille du côté Android dans la version native 0.45 de réaction

static navigationOptions = {
    header: null
}
0
Atif Mukhtiar