react-native - props - react navigation first screen

React Navigation-navegar a otra pestaña y reiniciar la pila

Question

Estoy intentando enrutar de un StackNavigator a otro, los cuales están dentro de un TabNavigator. Actualmente puedo llegar simplemente haciendo:

this.props.navigation.navigate(''Screen3'')

Pero también quiero restablecer esa pestaña cuando vaya a ella. Aquí es cómo se configuran mis navegadores de aplicaciones en general:

- Main (StackNavigator)
- LoginScreen
- MainTabs (TabNavigator)
- Tab1 (StackNavigator)
- Screen1
- Screen2
- Tab2 (StackNavigator)
- Screen3
- Screen4

¿Cómo podría navegar a Screen3 pero también reiniciar el StackNavigator Tab2 ?

También he intentado hacer esto, en vano:

let resetAction = NavigationActions.reset({
index: 0,
key: ''Tab2'',
actions: [
NavigationActions.navigate({ routeName: ''Screen3'' })
],
});
this.props.navigation.dispatch(resetAction);

Answer 1

Aquí es cómo resolví esto usando NavigationService :

NavigationService.reset({
index: 0,
key: null, // required to reset tabs
actions: [
NavigationActions.navigate({
routeName: ''MainTabs'',
action: NavigationActions.navigate({ routeName: ''Tab2'' }),
}),
],
});
NavigationService.navigate({
key: ''Screen3'',
routeName: ''Screen3'',
});

presta atención a la opción ''clave: nula'', esto hizo que funcionara

Answer 2

Primero tendrás que navegar a la pestaña y luego restablecer la pantalla que deseas

this.props.navigation.navigate(''Tab2'');
let resetAction = StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate(
{
routeName: ''Screen3'',
params: {},
key: Math.random() + ''Screen3''
}
)
]
})
this.props.navigation.dispatch(resetAction);

Answer 3

Puede usar la action avanzada de la api de navigate combinada con las funciones dependientes de Navigator sin usar ninguna acción adicional o llamada de navegación .

Aquí hay un ejemplo

navigateWithReset = (routeName) => {
const navigateAction = NavigationActions.navigate({
routeName,
action: this.props.navigation.popToTop(),
});
this.props.navigation.dispatch(navigateAction);
};

El enlace de snack de trabajo se puede encontrar here .

Answer 4

Se basa en la arquitectura de su pila, sin embargo, debe navegar después de su despacho resetAction .

Después de resetAction despachamos el uso debajo del código:

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

Answer 5

Tendrá que enviar dos acciones de navegación, una para restablecer la pila de la pestaña actual y otra para navegar a la siguiente pantalla:

let resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: ''Screen1'' })
],
});
this.props.navigation.dispatch(resetAction);
this.props.navigation.navigate(''Screen3'');

Aquí hay una snack