React Native开发（六：自定义React Navigation 过场动画）

最新推荐文章于 2026-05-04 12:42:15 发布

原创

最新推荐文章于 2026-05-04 12:42:15 发布 · 2.8k 阅读

收录于

本文介绍了如何在React Native中自定义React Navigation的过场动画，以满足统一安卓端的动画效果需求。内容包括覆盖默认动画方案，实现特定场景的动画反转以及在搜索页面中注入过渡动画的选择方案。通过自定义过渡动画，目前可以实现四个方向的进入效果，若需更多定制，可进一步修改transitionConfig方法。

（一）前言
版本环境

node 8.0+(v8.12.0)
npm 5.0+(v6.4.1)
java (v1.8.0_172)

"react-native": "0.57.1",
"react": "16.5.0",
"react-navigation": "^2.18.0",

（二）需求

为了统一安卓端card过场动画（安卓类似modal切换）, 需要给定义transitionConfig，给两端一样的切换动画,
对于某些card切换，需要reverse动画效果, 比如：需要将默认的右边滑入进入左侧，反转为左边进入右侧
对于一些通用的search页面，在tabbar（在4个根页面）同时注入, 大概率原因是, 直接使用modal放入顶层，在search中再次跳转详情，是无法返回到上次页面的，maybe是路由使用姿势不对，所以这里：需要提供页面card，可以选择过渡动画的方案

（三）实现

基于上述三个需要，我们需要自定义页面动画，首先

在src/constants/theme.js中，我们定义常量文件

/* eslint-disable import/no-extraneous-dependencies */
import CardStackStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator';
import { Easing, Animated, Platform } from 'react-native';

// animate
const forReverseHorizontal = 'forReverseHorizontal';
const forReverseVertical = 'forReverseVertical';

export default {
  // ...
  // transition
  transitionForH