Reactnative StackNavigator中如何改变动画的方向

发布于12月31日

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

当前行为

当用户转到另一个屏幕时，屏幕从bottom to top开始.

预期行为

当用户转到另一个屏幕时，屏幕从right to left开始.(比如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这样的自然动画:)

提前谢谢，

推荐答案

在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只能有两个值: