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

Question

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

当前行为

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

预期行为

当用户转到另一个屏幕时，屏幕从 飞出从右到左 . (比如 Facebook 或 Instagram!)

堆栈导航器代码

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

如果能设置动画时间就更好了!目前看起来屏幕从屏幕中间飞到顶部。我想要像 Facebook 或 Instagram 那样的自然动画 :)

提前致谢，

Answer 1

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

我们使用 CardStackStyleInterpolator来自 react-navigation 源，但如果需要，您可以提供自定义转换，这里是如何制作 one或 here或 this article .
mode更多用于默认行为:

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

mode只能有两个值:

card - 使用标准的 iOS(从右到左)和 Android(从下到
顶部)屏幕转换。这是默认设置。

modal - 使屏幕从底部滑入这是一个常见的
iOS 模式。仅适用于iOS，对Android 无效。