Disabilita il pulsante Indietro nella navigazione reattiva

Sto usando StackNavigator di navigazione nativa di reazione (navigazione reattiva). parte dalla pagina di login durante l'intero ciclo di vita dell'app. Non voglio avere un'opzione indietro, tornando alla schermata di accesso. Qualcuno sa come può essere nascosto sullo schermo dopo la schermata di accesso? BTW, lo sto anche nascondendo nella schermata di accesso usando:

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

1) Per far scomparire il pulsante Indietro in React-Navigation v2 o più recente:

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

2) Se vuoi pulire lo stack di navigazione:

Supponendo che tu sia sullo schermo da cui desideri navigare:

Se stai utilizzando la versione di navigazione reattiva v5 o successiva , puoi utilizzare navigation.reseto 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' }],
});

Fonte e maggiori informazioni qui: https://reactnavigation.org/docs/navigation-prop/#reset

O:

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

Fonte e maggiori informazioni qui: https://reactnavigation.org/docs/navigation-actions/#reset

Per le versioni precedenti di React-Navigation:

v2-v4 utilizzoStackActions.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 usoNavigationActions.reset

3) Per Android dovrai anche disabilitare il pulsante hardware indietro usando BackHandler :

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

o se vuoi usare gli hook:

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

altrimenti l'app si chiuderà premendo il pulsante Indietro dell'hardware Android se lo stack di navigazione è vuoto.

Hai pensato di usare this.props.navigation.replace( "HomeScreen" )invece di this.props.navigation.navigate( "HomeScreen" ).

In questo modo non stai aggiungendo nulla allo stack. quindi HomeScreen non saluterà nulla a cui tornare se il pulsante Indietro viene premuto in Android o lo schermo viene fatto scorrere a destra in IOS.

Maggiori informazioni controllare la documentazione . E, naturalmente, è possibile nascondere il pulsante indietro impostando headerLeft: nullinnavigationOptions

Dobbiamo impostare false gesturesEnabledinsieme a headerLefta null. Perché possiamo tornare indietro anche scorrendo lo schermo.

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

Puoi nascondere il pulsante Indietro usando left:null, ma per i dispositivi Android è ancora in grado di tornare indietro quando l'utente preme il pulsante Indietro. È necessario ripristinare lo stato di navigazione e nascondere il pulsante conleft:null

Ecco i documenti per ripristinare lo stato di navigazione:
https://reactnavigation.org/docs/navigation-actions#reset

Questa soluzione funziona per react-navigator 1.0.0-beta.7, tuttavia left:nullnon funziona più per l'ultima versione.

utilizzando BackHandler di React Native ha funzionato per me. Basta includere questa riga nel tuo ComponentWillMount:

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

disabiliterà il pulsante Indietro sul dispositivo Android.

l'ho trovato io stesso;) aggiungendo:

  left: null,

disabilitare il pulsante Indietro predefinito.

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

versioni di navigazione reattiva> = 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}

L'opzione migliore per gestire questa situazione è usare SwitchNavigator fornito da React Navigation . Lo scopo di SwitchNavigator è quello di mostrare solo una schermata alla volta. Per impostazione predefinita, non gestisce le azioni indietro e ripristina le rotte al loro stato predefinito quando ci si allontana. Questo è il comportamento esatto necessario nel flusso di autenticazione.

Questo è un modo tipico per implementarlo.

1. Crea 2 stack navigator: uno per l'autenticazione (accesso, registrazione, password dimenticata, ecc.) E un altro per l'APP principale
2. Crea una schermata in cui controllerai quale percorso dallo switch navigator vuoi mostrare (di solito lo controllo nella schermata iniziale controllando se un token è memorizzato nella memoria Async)

Ecco un'implementazione del codice delle istruzioni precedenti

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./homeScreenPath" 
import OtherScreen from "./otherScreenPath"
import SignInScreen from "./SignInScreenPath" 
import SplashScreen from "./SplashScreenPath"

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

const AuthStack = createStackNavigator({ SignIn: SignInScreen });


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

Ora in SplashScreen controllerai il token e navigherai di conseguenza

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

class SplashScreen extends React.Component {
  componentDidMount() {
    this.checkIfLogin();
  }

  // Fetch the token from storage then navigate to our appropriate place
  checkIfLogin = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this splash
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

Una volta che cambi percorso in SwitchNavigator, rimuove automaticamente il percorso più vecchio e quindi se premi il pulsante Indietro non ti porterà più alle schermate di autenticazione / login

Possiamo risolverlo impostando headerLeft su null

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

Per l'ultima versione di React Navigation 5 con Typescript:

<Stack.Screen
    name={Routes.Consultations}
    component={Consultations}
    options={{headerLeft: () => null}}
  />

Lo SwitchNavigator sarebbe il modo per ottenere questo risultato. SwitchNavigatorripristina le rotte predefinite e smonta la schermata di autenticazione quando navigateviene richiamata l' azione.

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',
  }
));

Dopo che l'utente è andato a SignInScreen e ha immesso le proprie credenziali, dovresti chiamare

this.props.navigation.navigate('App');

Semplicemente facendo

headerLeft: null

potrebbe essere deprecato nel momento in cui leggerai questa risposta. Dovresti usare following

   navigationOptions = {
        headerTitle : "Title",
        headerLeft : () => {},
    }

ReactNavigation v 5.0 - Opzione stack:

options={{
headerLeft: () => { 
 return <></>; 
}
}}

Penso che sia semplice basta aggiungere headerLeft : null, sto usando cli nativo di reazione, quindi questo è l'esempio:

static navigationOptions = {
    headerLeft : null
};

Per l'ultima versione di React Navigation, anche se usi null in alcuni casi, potrebbe comunque mostrare la scritta "back"!

Vai per questo nel tuo app.js principale sotto il nome della schermata o vai al file della classe e aggiungi: -

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

Nell'ultima versione (v2) funziona headerLeft:null. puoi aggiungere il controller navigationOptionscome sotto

static navigationOptions = {
    headerLeft: null,
};

Per la versione di navigazione reattiva 4.x

navigationOptions: () => ({
      title: 'Configuration',
      headerBackTitle: null,
      headerLayoutPreset:'center',
      headerLeft: null
    })

headerLeft: null

Questo non funzionerà nell'ultima versione nativa di React

Dovrebbe essere:

navigationOptions = {
 headerLeft:()=>{},
}

Per dattiloscritto:

navigationOptions = {
 headerLeft:()=>{return null},
}

Nelle versioni 5.x di react-navigation, puoi farlo in questo modo:

import { CommonActions } from '@react-navigation/native';

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

Puoi leggere di più qui .