React-native-scrollable-tab-view 自定义tabbar,实现下划线伸缩效果

React-native-scrollable-tab-view 是rn 开发里比较方便的tab切换插件。

先上效果图吧。github地址 :https://github.com/JunIce/react-native-scroll-customTabBar

 

React-native-scrollable-tab-view 自定义tabbar,实现下划线伸缩效果_第1张图片
实现的效果

运行过官方demo的同学都知道,原来的demo是下面的横线平分整个盒模型, 如下图。

官方demo

可是现实需求不一定是要等分的,类似于微博会有这种下边框带动效的tab。

分析我们的需求,下边线由原来的等分变成居中,所以原来的自适应填充就不能使用了,需要我们来定义下边线的长度,

this.props.tabUnderlineDefaultWidth ? this.props.tabUnderlineDefaultWidth : containerWidth / (numberOfTabs * 2);

为了达到预期的效果,我这里设置的如果不填写默认宽度,就默认设置原来tab的一半。

居中效果用绝对定位, 配和计算left值达到居中效果

接下来就是滑动过程中下边框变长,如果说要js滑动过程计算,那计算很复杂,所以才用来scaleX这中方式进行变化,达到变长的目的。

const translateX = this.props.scrollValue.interpolate({

                 inputRange: [0, 1],

                outputRange: [0, containerWidth / numberOfTabs],

});

 

我们看原来源码里的动画函数,就是scrollValue会传过来一个动画对象,0即是开始状态,1是结束状态,结束时移动一个tab的宽度,inputRange 和 outputRange 数组里的元素是一一对应的,inputRange数组元素是数字,必须从小到大

我们要实现的动画是在0到1的中间变长, 即0.5时应该是最大的

const scaleValue = (defaultScale) => {

            let number = 4

            let arr = new Array(number * 2)

            return arr.fill(0).reduce(function(pre, cur, idx){

                idx == 0 ? pre.inputRange.push(cur) : pre.inputRange.push(pre.inputRange[idx-1] + 0.5);

                idx%2 ? pre.outputRange.push(defaultScale) : pre.outputRange.push(1)

                return pre

                }, {inputRange: [], outputRange: []})

        }

通过reduce函数生成一个对象,最后的结果是 codepen

 

这样把生成的scaleX的值传到translate里面,即可生成动效

源码地址:https://github.com/JunIce/react-native-scroll-customTabBar, 希望大家给个star, 这年头多要点工资就看star了

你可能感兴趣的