¿Cómo cambiar la dirección de la animación en StackNavigator?

Solución:

Para react navigation 5.0 algo como esto parece funcionar:

import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';
    
const Stack = createStackNavigator();
export default () => (
  <Stack.Navigator
    screenOptions={{
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
    }}
  >
    <Stack.Screen name="Screen 1" component={ScreenComponent1} />
    <Stack.Screen name="Screen 2" component={ScreenComponent2} />
  </Stack.Navigator>
);

Más información aquí: https://reactnavigation.org/docs/stack-navigator/#pre-made-configs

En iOS es el comportamiento estándar. Android requiere un poco de configuración. Hay dos opciones que puede utilizar para configurar las transiciones de pantalla: mode y transitionConfig. En este caso transitionConfig trabajará:

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
// this path can be different depending on react-navigation version, this one is for @1.0.0-beta.15 

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
        ...
}, {
   transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
   }),
})

Usamos CardStackStyleInterpolator desde la fuente de navegación de reacción, pero puede proporcionar una transición personalizada si lo desea, aquí se explica cómo hacer una o aquí o este artículo.

mode es más por comportamiento predeterminado:

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
    ...
}, {
    mode: 'card',
    navigationOptions: ({navigation, screenProps}) => ({
        tabBarOnPress: blahblaj
    }),
    lazy: true
});

mode puede tener solo dos valores:

• card – Utilice las transiciones de pantalla estándar de iOS (de derecha a izquierda) y Android (de abajo hacia arriba). Este es el predeterminado.

• modal – Haga que las pantallas se deslicen desde la parte inferior, que es un patrón común de iOS. Solo funciona en iOS, no tiene ningún efecto en Android.

Respuesta actualizada:

import ReactNavigation from "react-navigation";
createStackNavigator({...},{
  transitionConfig: () =>
    ReactNavigation.StackViewTransitionConfigs.SlideFromRightIOS
})

---

---

Utiliza Nuestro Buscador