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

Question

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

Current Behavior

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

Expected Behavior

当用户转到另一个屏幕时，屏幕从右向左飞行。 （像Facebook或Instagram！）

StackNavigator Code

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

我们使用来自react-navigation源的CardStackStyleInterpolator，但如果你愿意，你可以提供自定义转换，这里是如何制作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没有影响。

Answer 2

在这里，我只是发布我的答案，以便你可以改变动画的方向！就这样！您接受的答案只是默认！

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

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

通过这种方式，屏幕转换将在两个平台上从右到左！你需要多注意的是你可以使用transitionConfig道具设置任何你想要的屏幕过渡！