【React-native】react-navigation 3.x 自定义切换动画

继我们接入了react-navigation 作为导航，并且实现android从右往左滑，那我现在又想各个页面切换的时候动画自定义，那该怎么搞？

【往期：android从右往左滑：https://blog.csdn.net/qq934235475/article/details/99436772】

---

这就需要我们对 router 的配置文件进行更改了，总体思路就是，跳转时传入一个参数（暂且叫 transitionType），然后在router文件中根据此参数来进行不同的动画跳转，废话不多说，让我们开搞

---

/**
 * 自定义动画参数，通过在跳转页面中增加 transitionType: '类型' 来进行动画设置，默认 forHorizontal（从右往左）
 * @param sceneProps 路由参数获取源
 * @returns {*}
 * @constructor
 */
function TransitionConfiguration(sceneProps) {
    const {scene} = sceneProps;
    const {route} = scene;
    const params = route.params || {};
    const transitionType = params.transitionType;
    if (transitionType && transitionType !== '') {
        return StackViewStyleInterpolator[transitionType];
    } else {
        return StackViewStyleInterpolator.forHorizontal;
    }
}

然后，底部的参数配置需要更改，如下：

transitionConfig: (sceneProps) => ({
     /**
       * 1、从右向左：  forHorizontal；
       * 2、从下向上：  forVertical；
       * 3、安卓那种的从下向上： forFadeFromBottomAndroid；
       * 4、无动画：  forInitial。
       */
     screenInterpolator: TransitionConfiguration(sceneProps),
     })

这样一来，我们跳转的时候就根据不同的参数来呈现不同的动画了。

使用（如下为跳转动画android从底部往上）：

this.props.navigation.push('VersionInfo', {transitionType: 'forFadeToBottomAndroid'})

这里，目前支持的动画如下：

如果输入不存在的参数，则默认是 forFade 

---

实现效果如下图：

 

---

 项目地址：

https://github.com/supervons/ExploreRN

前方发现博主的小行星，内涵大量独特见解文章，欢迎加入讨论学习，随时交谈！