react滑动切换tab动画效果_React-native-scrollable-tab-view 自定义tabbar，实现下划线伸缩效果...

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

实现的效果

运行过官方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是结束状态，结