自定义ScrollableTabView 的TabBar(带animation)

在开发react-native程序中,react-native-scrollable-tab-view 是一个很常用的tab切换插件。因为需求原因基本上都会去定制tabBar,在这里讲解如何实现动态的下标线。

下标线就是一个定位在tabView底部的视图,随着tab的切换来改变定位。我们要实现的动态下标线只是在切换过程中实现一个类似斐波那契数列的动画曲线。

我们首先直接可以把默认的defaultTabBar的代码copy过来,然后修改scrollValue的动画值即可。

image.png

修改的核心代码就在scaleValue这里,这个地方有点绕。因为我们需要实现弹性的下标线,通俗一点就是从小到大再到小再到大,其实最后只是为了得出{ inputRange: [x1,x2,x1,x2], outputRange: [y1,y2,y1,y2] } 这样的动画系数而已。所以这里就借用数组的reduce方法来帮我们构建这对动画系数。

最终实现效果如下:

QQ20180917-023936.gif

thanks!

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容