Estoy usando la navegación nativa de reacción (navegación de reacción) 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 retroceso, 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 escondo en la pantalla de inicio de sesión usando:
const MainStack = StackNavigator({ Login: { screen: Login, navigationOptions: { title: "Login", header: { visible: false, }, }, }, // ... other screens here })1) Para hacer desaparecer el botón Atrás en react-navigation v2 o posterior:
v2-v4:
navigationOptions: { title: 'MyScreen', headerLeft: null }v5 o más reciente :
{ navigationOptions: { title: 'MyScreen', headerLeft: ()=> null, // `headerLeft: undefined` should work too // `headerLeft: null` should work but could trigger a TS error }2) Si desea limpiar la pila de navegación:
Suponiendo que se encuentra en la pantalla desde la que desea navegar:
Si está utilizando la versión v5 o más reciente de react-navigation , puede usar navigation.reset o 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' }], });Fuente y más información aquí: https://reactnavigation.org/docs/navigation-prop/#reset
O:
navigation.dispatch( CommonActions.reset({ index: 1, routes: [ { name: 'Home' }, { name: 'Profile', params: { user: 'jane' }, }, ], }) );Fuente y más información aquí: https://reactnavigation.org/docs/navigation-actions/#reset
v2-v4 usa 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 usa NavigationActions.reset
3) Para Android, también deberá deshabilitar el botón de retroceso del hardware usando BackHandler :
http://reactnative.dev/docs/backhandler.html
o si quieres usar ganchos:
https://github.com/react-native-community/hooks#usebackhandler
de lo contrario, la aplicación se cerrará al presionar el botón Atrás del hardware de Android si la pila de navegación está vacía.
Fuentes adicionales: gracias a los usuarios que agregaron comentarios a continuación y ayudaron a mantener esta respuesta actualizada para v5.
¿Ha considerado usar this.props.navigation.replace( "HomeScreen" ) en lugar de this.props.navigation.navigate( "HomeScreen" ) .
De esta manera no estás agregando nada a la pila. por lo que HomeScreen no agitará nada para volver si se presiona el botón Atrás en Android o si se desliza la pantalla hacia la derecha en IOS.
Más información consultar la Documentación . Y, por supuesto, puede ocultar el botón Atrás configurando headerLeft: null en las opciones de navigationOptions
Necesitamos configurar false para los gesturesEnabled junto con headerLeft en null . Porque también podemos navegar hacia atrás deslizando la pantalla.
navigationOptions: { title: 'Title', headerLeft: null, gestureEnabled: false, }