React Navigation StackNavigator中指定屏幕过渡方式

此方法针对 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 中指定屏幕过渡方式