如何在 StackNavigator 中更改动画的方向?
当前行为
当用户转到另一个屏幕时,屏幕从 飞出从下到上 .
预期行为
当用户转到另一个屏幕时,屏幕从 飞出从右到左 . (比如 Facebook 或 Instagram!)
堆栈导航器代码
export default StackNavigator ({
Main: {
screen: MainScreen,
},
...
}, {
navigationOptions: ({navigation, screenProps}) => ({
tabBarOnPress: blahblaj
}),
lazy: true
// I guess we can do something here
});
提前致谢,
最佳答案
在 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 无效。
关于animation - 如何在 StackNavigator 中更改动画的方向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48018666/