web-dev-qa-db-fra.com

Désactiver le bouton de retour dans la navigation à réaction

J'utilise réaction StackNavigator de navigation native (réact-navigation). il commence à partir de la page de connexion tout au long du cycle de vie de l'application. Je ne souhaite pas avoir d’option de retour pour revenir à l’écran de connexion. Est-ce que quelqu'un sait comment il peut être caché à 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
})
reactjsreact-nativenavigationreact-navigation
47
EyalS

Pour la version de react-navigation v1> = 1.0.0-beta.9, pour faire disparaître le bouton Précédent:

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

Si vous souhaitez également nettoyer la pile de navigation, vous pouvez procéder de la manière suivante (en supposant que vous soyez sur l'écran à partir duquel vous souhaitez naviguer):

import { NavigationActions } from 'react-navigation';

et utilisez une fonction pour accéder à l'itinéraire cible et désactivez toutes les fonctionnalités arrière:

resetNavigation(targetRoute) {
  const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: targetRoute }),
    ],
  });
  this.props.navigation.dispatch(resetAction);
}

puis appelez this.resetNavigation('myRouteWithDisabledBackFunctionality') quand vous voulez naviguer vers l'itinéraire cible

Pour la version 2 de react-navigation, vous devez utiliser StackAction.reset(...) au lieu de NavigationActions.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);

Plus d'infos ici: https://reactnavigation.org/docs/fr/stack-actions.html

104
Florin Dobre

Vous pouvez masquer le bouton Précédent à l'aide de left:null, mais pour les appareils Android, il est toujours possible de revenir en arrière lorsque l'utilisateur appuie sur le bouton Précédent. Vous devez réinitialiser l'état de navigation et masquer le bouton avec left:null

Voici la documentation permettant de réinitialiser l'état de navigation: https://reactnavigation.org/docs/navigators/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. 

16
Echo7

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. donc HomeScreen ne fera pas signe à quoi que ce soit pour revenir si le bouton précédent est enfoncé dans Android ou si l'écran est glissé vers la droite dans IOS. 

Plus d'informations sur le Documentation . Et bien sûr, vous pouvez masquer le bouton Précédent en définissant headerLeft: null dans navigationOptions

7
Tarik Chakur

Nous devons définir false à gesturesEnabled avec headerLeft à null. Parce que nous pouvons revenir en arrière en balayant l'écran également. 

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

je l'ai trouvé moi-même;) 

  left: null,

désactiver le bouton de 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,
      }
    },
  },
3
EyalS

versions de réaction> = 1.0.0-beta.9 

navigationOptions:  {
headerLeft: null}
3
Vaibhav Bacchav

en utilisant le BackHandler de Rea natif a fonctionné pour moi. Incluez simplement cette ligne dans votre ComponentWillMount:

BackHandler.addEventListener('hardwareBackPress', function() {return true})

il désactivera le bouton de retour sur le périphérique Android.

2
OsamaD

Le SwitchNavigator serait le moyen d'y parvenir. SwitchNavigator réinitialise les itinéraires par défaut et démonte l'écran d'authentification lorsque l'action navigate est invoquée.

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

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

Une fois que l'utilisateur a accédé à SignInScreen et saisi ses informations d'identification, vous appelez

this.props.navigation.navigate('App');
0
Scott Davis

Dans la dernière version (v2) fonctionne headerLeft:null. vous pouvez ajouter dans la variable navigationOptions du contrôleur comme ci-dessous

static navigationOptions = {
    headerLeft: null,
  };
0
tarikul05

je pense que c'est simple, il suffit d'ajouter headerLeft : null, j'utilise react-native cli, voici l'exemple:

static navigationOptions = {
        headerLeft : null
    };
0
Cevin Ways

Nous pouvons le réparer en définissant headerLeft sur null 

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}
0
Klaudia Brysiewicz

Pour la dernière version de React Navigation, même si vous utilisez null dans certains cas, il est toujours possible que "back" soit écrit!

Allez-y dans votre main app.js sous votre nom d’écran ou allez simplement dans votre fichier class et ajoutez: -

 static navigationOptions = {
        headerTitle:'Disable back Options',
        headerTitleStyle: {color:'white'},
        headerStyle: {backgroundColor:'black'},
        headerTintColor: 'red',
        headerForceInset: {vertical: 'never'},
        headerLeft: " "
      }
0
Rishav Kumar