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

此方法针对 react-navigation 2.x,3.x 版本。

问题

在React Navigation中使用StackNavigator时，屏幕切换的过渡方式是通过StackNavigator参数StackNavigatorConfig.mode来指定的。缺省情况下，此参数的值为card，在android手机上表现为自底向上滑出，在苹果手机上表现为自右向左滑出。另外一个可用的选项是modal，不过这个选项仅仅针对苹果手机可用，其表现为自底向上滑出屏幕。

以上这两种选项，不论是是使用card,还是modal都不能达到我们预期的双平台一致的效果：

• 非模态屏幕：自右向左滑出
• 模态屏幕：自底向上滑出

思路

要想达到该效果，简单地使用以上选项定义统一定义所有屏幕的出现方式是解决不了问题的，现在我们必须能够指定某个屏幕的过渡方式。目前React Navigation的最新版本是3.0.8，官方文档并没有提供一个建议的方法来做到这一点。要想做到这一点，我们继续使用之前针对React Navigation v1.5.11的方案。但因为版本的变化，思路不变，实现有所变化：transitionConfig结合使用内置的跳转动画。

代码实现

针对React Navigation v2,v3,其内置的跳转动画在react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator中定义，共三种方式 ：

• forHorizontal : 从右向左进入 (针对安卓/苹果双平台该参数效果相同)
• forVertical : 从下向上进入 (针对安卓/苹果双平台该参数效果相同)
• forFadeFromBottomAndroid : 从底部淡出

由上可以看出，综合利用forHorizontal,forVertical配置特定屏幕的过渡方式，我们可以达到上面我们提到的的双平台一致的效果。

在React Navigation v1.5.11版本中，其内置跳转动画在react-navigation/src/views/CardStack/CardStackStyleInterpolator中定义。

自定义 transitionConfig 支持指定单个屏幕出现方式

现在我们可以为StackNavigator自定一个transitionConfig来支持可以对某个屏幕指定不一样的过渡方式：

import StackViewStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator';
					
const TransitionConfiguration = () => ({
    screenInterpolator: (sceneProps) => {
        const {scene} = sceneProps;
        const {route} = scene;
        // 获取屏幕切换时新屏幕的参数
        const params = route.params || {};
        // 看看参数中是否有 transition 参数，有则使用，否则使用缺省值 forHorizontal
        // forHorizontal 表示从右向左滑出
        const transition = params.transition || 'forHorizontal';
        return StackViewStyleInterpolator[transition](sceneProps);
    },
});

const StackScreens = createStackNavigator({
	 //... 路由屏幕定义;
},
{
	 transitionConfig: TransitionConfiguration,
     defaultNavigationOptions: {
          //... 省略
     },
});

使用指定方式过渡到特定屏幕

现在看看怎么使用 ,假设我们在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
createStackNavigator