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

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

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

 

实现的效果

运行过官方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了