此方法针对 react-navigation 1.5.xx, 在更新版本3.x中此方法已经不再可用。
问题
在React Navigation
中使用StackNavigator
时,新屏幕的过渡方式是通过StackNavigator
的参数StackNavigatorConfig.mode
来指定的。缺省情况下,此参数的值为card
,在android
手机上表现为自底向上滑出,在苹果手机上表现为自右向左滑出。另外一个可用的选项是modal
,不过这个选项仅仅针对苹果手机可用,其表现为自底向上滑出屏幕。
以上这两种选项,不论是是使用card
,还是modal
都不能达到我们预期的双平台一致的效果:
- 非模态屏幕自右向左滑出
- 模态屏幕自底向上滑出
思路
要想达到该效果,简单地使用以上选项定义所有屏幕的出现方式是解决不了问题的,现在我们必须能够指定某个屏幕的过渡方式。截止到目前,React Navigation的最新版本是1.5.11
,但从其官方文档来看,并没有一个方便的方法来做到这一点。要想做到这一点,可以使用另外一个较为复杂的方式:transitionConfig
结合使用内置的跳转动画。
代码实现
React Navigation内置的跳转动画在react-navigation/src/views/CardStack/CardStackStyleInterpolator中,共三种:
- forHorizontal : 从右向左进入 (android/苹果行为一致)
- forVertical : 从下向上进入 (android/苹果行为一致)
- forFadeFromBottomAndroid : 从底部淡出
由上可以看出,使用forHorizontal
,forVertical
指定特定屏幕的过渡方式,我们可以达到上面我们提到的的双平台一致的效果。
自定义 transitionConfig
支持指定单个屏幕出现方式
现在我们可以为StackNavigator
自定一个transitionConfig
来支持可以对某个屏幕指定不一样的过渡方式:
import CardStackStyleInterpolator from
'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
const TransitionConfiguration = () => ({
screenInterpolator: (sceneProps) => {
const {scene} = sceneProps;
const {route} = scene;
// 获取屏幕切换时新屏幕的参数
const params = route.params || {};
// 看看参数中是否有 transition 参数,有则使用,否则使用缺省值 forHorizontal
// forHorizontal 表示从右向左滑出
const transition = params.transition || 'forHorizontal';
return CardStackStyleInterpolator[transition](sceneProps);
},
});
const StackScreens = StackNavigator({
//... 路由屏幕定义;
},
{
transitionConfig: TransitionConfiguration,
navigationOptions: {
//... 省略
},
});
使用指定方式过渡到特定屏幕
现在看看怎么使用 ,假设我们在StackNavigator StackScreens
的某个屏幕中想跳到登录屏幕,并且希望登录屏幕自底向上弹出,可以这么做:
this.props.navigation.navigate('LoginScreen', {transition: 'forVertical'});
参考资料
react-navigation自定义StackNavigator页面跳转动画
React Native Navigation, custom Scene (Screen) Transitions and interpolations
React Navigation: An Overview of Transitioner and CardStack
React Navigation v2/v3 StackNavigator 中指定屏幕过渡方式