Désactiver le bouton de retour dans la navigation des réacteurs

Question

J'utilise la navigation react native (react-navigation) StackNavigator. Il démarre à partir de la page de connexion tout au long du cycle de vie de l'application. Je ne veux pas avoir une option de retour, renvoyant à l'écran de connexion. Quelqu'un sait-il comment la cacher sur l'écran après l'écran de connexion ? BTW, je le cache également dans l'écran de connexion en utilisant :

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})

Answer 1

1) Pour faire disparaître le bouton retour dans react-navigation v2 ou plus récent :

v2-v4 :

navigationOptions:  {
    title: 'MyScreen',
    headerLeft: null
}

v5 :

{     
    navigationOptions:  {
    title: 'MyScreen',
    headerLeft: ()=> null, // Note: using just `null` instead of a function should also work but could trigger a TS error
}

2) Si vous voulez nettoyer la pile de navigation :

En supposant que vous êtes sur l'écran à partir duquel vous voulez naviguer :

Si vous utilisez react-navigation version v5 ou plus récente vous pouvez utiliser navigation.reset ou CommonActions.reset :

 // Replace current navigation state with a new one,
 // index value will be the current active route:

navigation.reset({
  index: 0,
  routes: [{ name: 'Profile' }],
});

Source et plus d'informations ici : https://reactnavigation.org/docs/navigation-prop/#reset

Ou :

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

Source et plus d'informations ici : https://reactnavigation.org/docs/navigation-actions/#reset

Pour les anciennes versions de react-navigation :

v2-v4 utiliser StackActions.reset(...)

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0, // <-- currect active route from actions array
  actions: [
    NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),
  ],
});

this.props.navigation.dispatch(resetAction);

v1 utiliser NavigationActions.reset

3) Pour Android, vous devez également désactiver le bouton de retour matériel en utilisant le BackHandler. :

http://reactnative.dev/docs/backhandler.html

ou si vous voulez utiliser des crochets :

https://github.com/react-native-community/hooks#usebackhandler

Sinon, l'application se fermera lorsque le matériel Android appuiera sur le bouton retour si la pile de navigation est vide.

Sources supplémentaires : merci aux utilisateurs qui ont ajouté des commentaires ci-dessous et qui ont aidé à maintenir cette réponse à jour pour la v5.

Answer 2

Avez-vous envisagé d'utiliser this.props.navigation.replace( "HomeScreen" ) au lieu de this.props.navigation.navigate( "HomeScreen" ) .

De cette façon, vous n'ajoutez rien à la pile. Ainsi, l'écran d'accueil n'aura pas d'onde pour revenir en arrière si vous appuyez sur le bouton retour dans Android ou si vous faites glisser l'écran vers la droite dans IOS.

Pour plus d'informations, consultez le site Documentation . Et bien sûr, vous pouvez masquer le bouton retour en définissant headerLeft: null sur navigationOptions

Answer 3

Nous devons mettre false à la gesturesEnabled ainsi que headerLeft à null . Parce qu'on peut aussi revenir en arrière en faisant glisser l'écran.

navigationOptions:  {
   title: 'Title',
   headerLeft: null,
   gesturesEnabled: false,
}

Answer 4

Vous pouvez masquer le bouton retour en utilisant left:null Mais pour les appareils Android, il est toujours possible de revenir en arrière lorsque l'utilisateur appuie sur le bouton Retour. Vous devez réinitialiser l'état de la navigation et masquer le bouton à l'aide de la commande left:null

Voici la documentation sur la réinitialisation de l'état de la navigation :
https://reactnavigation.org/docs/navigation-actions#reset

Cette solution fonctionne pour react-navigator 1.0.0-beta.7 Cependant left:null ne fonctionne plus pour la dernière version.

Answer 5

Je l'ai trouvé moi-même ;) en ajoutant :

  left: null,

désactiver le bouton retour par défaut.

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  FirstPage: {
    screen: FirstPage,
    navigationOptions: {
      title: "FirstPage",
      header: {
        left: null,
      }
    },
  },