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

本文主要是介绍React Native开发（六：自定义React Navigation 过场动画），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

（一） 前言
版本环境

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",

（二） 需求

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

（三） 实现

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

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

/* eslint-disable import/no-extraneous-dependencies */
import CardStackStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator';
import {

这篇关于React Native开发（六：自定义React Navigation 过场动画）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---