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
摘要由CSDN通过智能技术生成

(一) 前言
版本环境

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 {
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值