Tengo un problema con la navegación de React Navigation y React Native. Se trata de resetear la navegación y volver a la pantalla de inicio.
Construí un StackNavigator dentro de un DrawerNavigator, y la navegación entre la pantalla de inicio y otras pantallas funciona. Pero el problema es que la pila de navegación crece y crece. No estoy seguro de cómo eliminar una pantalla de la pila.
Por ejemplo, al pasar de la pantalla de inicio a la pantalla de configuración, luego a la pantalla de entrada y, por último, nuevamente a la pantalla de inicio, la pantalla de inicio está dos veces en la pila. Con el botón de atrás no salgo de la app, sino de nuevo a la pantalla de entrada.
Al seleccionar el botón de inicio nuevamente, un reinicio de la pila sería excelente, pero no sé cómo hacerlo. Aquí alguien trató de ayudar a otra persona con un problema similar, pero la solución no funcionó para mí.
const Stack = StackNavigator({ Home: { screen: Home }, Entry: { screen: Entry }, Settings: { screen: Settings } }) export const Drawer = DrawerNavigator({ Home: { screen: Stack }}, { contentComponent: HamburgerMenu } )Y este es un ejemplo simple de la pantalla del cajón.
export default class HamburgerMenu extends Component { render () { return <ScrollView> <Icon.Button name={'home'} borderRadius={0} size={25} onPress={() => { this.props.navigation.navigate('Home')}}> <Text>{I18n.t('home')}</Text> </Icon.Button> <Icon.Button name={'settings'} borderRadius={0} size={25} onPress={() => { this.props.navigation.navigate('Settings')}}> <Text>{I18n.t('settings')}</Text> </Icon.Button> <Icon.Button name={'entry'} borderRadius={0} size={25} onPress={() => { this.props.navigation.navigate('Entry')}}> <Text>{I18n.t('entry')}</Text> </Icon.Button> </ScrollView> } }Espero que puedas ayudarme. ¡Esta es una parte esencial de la navegación y una solución sería genial!
Así es como lo hago:
reset(){ return this.props .navigation .dispatch(NavigationActions.reset( { index: 0, actions: [ NavigationActions.navigate({ routeName: 'Menu'}) ] })); }al menos reemplace 'Menú' con 'Inicio'. También puede adaptar this.props.navigation a su implementación.
En la versión > 2 sigue esto:
import { NavigationActions, StackActions } from 'react-navigation'; const resetAction = StackActions.reset({ index: 0, actions: [NavigationActions.navigate({ routeName: 'MainActivity' })], }); this.props.navigation.dispatch(resetAction);Encontré este camino a seguir mientras usaba @react-navigation Bashirpour's Answer . Sin embargo, al probar los componentes funcionales en los que ya tiene navegación en props , aquí hay una buena manera de escribir la acción de reinicio de la pila:
props.navigation.reset({ index: 0, routes: [{ name: 'Dashboard' }] })