如何在StackNavigator中更改动画的方向？

Question

如何在StackNavigator中更改动画的方向？

当前行为

当用户转到另一个屏幕时,屏幕从下到上飞行.

预期的行为

当用户转到另一个屏幕时,屏幕从右向左飞行.(像Facebook或Instagram!)

StackNavigator代码

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
    ...
}, {
    navigationOptions: ({navigation, screenProps}) => ({
        tabBarOnPress: blahblaj
    }),
    lazy: true
    // I guess we can do something here
});

• 如果我们可以设置动画时间,它会更好!目前看起来屏幕从屏幕中间飞到顶部.我想要像Facebook或Instagram这样的自然动画:)

提前致谢,

Answer 1

对于反应导航 5.0，这样的事情似乎有效：

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>
);

更多信息在这里：https : //reactnavigation.org/docs/stack-navigator/#pre-made-configs

Answer 2

在iOS上它是标准行为.Android需要一些配置.您可以使用两个选项来设置屏幕转换:mode和transitionConfig.在这种情况下transitionConfig将工作:

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,
   }),
})

我们使用CardStackStyleInterpolatorreact-navigation源,但是如果你愿意,你可以提供自定义转换,这里是如何制作一个或这里或这篇文章.

mode 更多的是默认行为:

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

mode 只能有两个值:

• card - 使用标准iOS(从右到左)和Android(从下到上)屏幕过渡.这是默认值.

• modal - 使屏幕从底部滑入,这是一种常见的iOS模式.仅适用于iOS,对Android没有影响.

Answer 3

更新的答案：

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