javascript - react - Navegación por reacción: navegue de regreso a la raíz usando NavigationActions.reset, goBack y getStateForAction

stackactions pop

Question

Digamos que he navegado a través de 4 pantallas en mi aplicación StackNavigator y ahora quiero volver a la primera pantalla. Parece que hay tres formas diferentes de hacerlo y navegan hacia donde yo quiero hacer, pero cada forma tiene una animación que recorre cada pantalla anterior.

¿Hay una forma clara de navegar de SCREEN_D a SCREEN_A ?

En otras palabras, no quiero ver SCREEN_C y SCREEN_B una fracción de segundo antes de ver SCREEN_A cuando SCREEN_A hacia atrás desde SCREEN_D

navigation.navigate(SCREEN_A);
...
navigation.navigate(SCREEN_B);
...
navigation.navigate(SCREEN_C);
...
navigation.navigate(SCREEN_D);

Tres formas de hacer esto:

1.

return this.props.navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [NavigationActions.navigate({ routeName: ''SCREEN_A''})]
                  }));

2.

 const {SCREEN_B_KEY} = this.props.navigation.state.params
 this.props.navigation.goBack(SCREEN_B_KEY)

3.

const defaultGetStateForAction = Navigation.router.getStateForAction;

Navigation.router.getStateForAction = (action, state) =>{
  if(action.type === "Navigation/BACK"){
    const routes = [
      {routeName: ''First''},
    ];
    return {
      ...state,
      routes,
      index: 0,
    };
  }
  return defaultGetStateForAction (action,state);
}

Answer 1

Aquí hay una solución rápida. Esto eliminará TODAS las transiciones al navegar (hacia adelante o hacia atrás).

const Nav = StackNavigator({
  Screens
},{
  transitionConfig,
  navigationOptions
});

en transitionConfig agrega esto:

const transitionConfig = () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
    },
  })

TransitionConfig es una función que devuelve un objeto que anula las transiciones de pantalla predeterminadas. https://reactnavigation.org/docs/navigators/stack

• si alguien sabe cómo cambiar las animaciones en una sola navegación, ¡me encantaría saber cómo!

Answer 2

También dediqué un tiempo a esto, permítanme resumir lo que descubrí, existen múltiples soluciones / soluciones para esto:

1) Use CardStackStyleInterpolator

La solicitud de extracción mencionada por Cristiano Santos parece fusionarse. Entonces puede cargar CardStackStyleInterpolator con esta importación:

import CardStackStyleInterpolator from ''react-navigation/src/views/CardStack/CardStackStyleInterpolator''

Para aplicarlo así:

const YourStackNavigator = StackNavigator({
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
}, {
    transitionConfig: () => ({
        screenInterpolator: (props) => CardStackStyleInterpolator.forHorizontal(props)
    })
});

En mi caso, simplemente salto a la siguiente pantalla como:

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

Pero en mi reductor, Modal_AddGoodClass el navegador cuando se Modal_AddGoodClass pantalla Modal_AddGoodClass :

const NewExportReceiptNavigationReducer = (state, action) => {
    // Default stuff

    let newStateBuffer = newState || state;

    if (action) {
        if (action.type === ''Navigation/NAVIGATE'') {
            if (action.routeName === ''Modal_AddGoodClass'') {
                newStateBuffer = {
                    index:  0,
                    routes: [
                        newStateBuffer.routes[newStateBuffer.routes.length - 1]
                    ]
                };
            }
        }
    }

    return newStateBuffer;
};

module.exports = NewExportReceiptNavigationReducer;

Esto funciona bastante bien, excepto por el hecho de que todavía se usa una animación "posterior" en lugar de una "directa".

También puede encontrar aquí un código de ejemplo que usa CardStackStyleInterpolator .

2) Sobrescribir getStateForAction :

Como Fendrian mencionó aquí , puede sobrescribir getStateForAction de su enrutador para evitar que el navegador regrese. Esto parece funcionar, excepto por el gesto de "deslizar hacia atrás" en iOS:

Nav = StackNavigator(navScreens, navOptions);
const defaultGetStateForAction = Nav.router.getStateForAction;
Nav.router.getStateForAction = (action, state) => {
  if (
    state &&
    action.type === NavigationActions.BACK &&
    (
      state.routes[state.index].routeName === ''Login'' ||
      state.routes[state.index].routeName === ''Main''
    )
  ) {
    // Returning null indicates stack end, and triggers exit
    return null;
  }
  return defaultGetStateForAction(action, state);
};