reactjs - sesión - Deshabilitar el botón de retroceso en la navegación de reacción

recargar pagina al volver atras

Question

Estoy usando reaccionar navegación nativa (react-navigation) StackNavigator. comienza desde la página de inicio de sesión durante todo el ciclo de vida de la aplicación. No quiero tener una opción de regreso, volviendo a la pantalla de inicio de sesión. ¿Alguien sabe cómo se puede ocultar en la pantalla después de la pantalla de inicio de sesión? Por cierto, también lo estoy ocultando en la pantalla de inicio de sesión usando:

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

Answer 1

¿Ha considerado usar this.props.navigation.replace( "HomeScreen" ) lugar de this.props.navigation.navigate( "HomeScreen" ) .

De esta manera, no está agregando nada a la pila. para que HomeScreen no muestre nada a lo que regresar si se presiona el botón Atrás en Android o la pantalla se desliza hacia la derecha en IOS.

Más información consultar la Documentation . Y, por supuesto, puede ocultar el botón headerLeft: null configurando headerLeft: null en navigationOptions

Answer 2

Creo que es simple, solo agregue headerLeft : null , estoy usando react-native cli, así que este es el ejemplo:

static navigationOptions = {
    headerLeft: null,
  };

Answer 3

En la última versión (v2) funciona headerLeft:null . puede agregar las opciones de navigationOptions del controlador como se indica a continuación

static navigationOptions = {
        headerLeft : null
    };

Answer 4

Necesitamos establecer false en los gesturesEnabled headerLeft junto con headerLeft a null . Porque podemos navegar hacia atrás deslizando la pantalla también.

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

Answer 5

Para la última versión de React Navigation, incluso si usa nulo en algunos casos, aún puede mostrar "atrás" escrito.

Busque esto en su app.js principal debajo de su nombre de usuario o simplemente vaya a su archivo de clase y agregue: -

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

Answer 6

Podemos arreglarlo estableciendo headerLeft en null

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

Answer 7

Puede ocultar el botón de retroceso usando left:null , pero para dispositivos Android aún puede retroceder cuando el usuario presiona el botón de retroceso. Debe restablecer el estado de navegación y ocultar el botón con la left:null

Estos son los documentos para restablecer el estado de navegación: https://reactnavigation.org/docs/navigators/navigation-actions#Reset

Esta solución funciona para react-navigator 1.0.0-beta.7 , sin embargo, left:null ya no funciona para la última versión.

Answer 8

lo encontré yo mismo;) agregando:

navigationOptions:  {
headerLeft: null}

deshabilita el botón de retroceso predeterminado.

  left: null,

Answer 9

usar el BackHandler de react native funcionó para mí. Simplemente incluya esta línea en su ComponentWillMount:

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

deshabilitará el botón de retroceso en el dispositivo Android.

Answer 10

SwitchNavigator sería la forma de lograr esto. SwitchNavigator restablece las rutas predeterminadas y desmonta la pantalla de autenticación cuando se invoca la acción de navigate .

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

Después de que el usuario vaya a la pantalla de inicio de sesión e ingrese sus credenciales, deberá llamar

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

Answer 11

Para react-navigation versión 4.x

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

Answer 12

Para react-navigation versión v2 o más reciente

para hacer desaparecer el botón de retroceso:

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

Si también desea limpiar la pila de navegación, puede hacer algo como esto (suponiendo que se encuentre en la pantalla desde la que desea navegar):

use 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);

Más información aquí: https://reactnavigation.org/docs/en/stack-actions.html

Para Android, también tendrá que deshabilitar el botón de retroceso del hardware con el BackHandler:

https://.com/a/40146089/1979861

de lo contrario, la aplicación se cerrará al presionar el botón de retroceso del hardware de Android si la pila de navegación está vacía.

Nota: En el antiguo react-navigation v1 se usaba NavigationActions.reset lugar de StackActions.reset.

Answer 13

versiones de react-navigation> = 1.0.0-beta.9

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