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