react滑动切换tab动画效果_[React Native]react-native-scrollable-tab-view(入门篇)

官方为我们提供的Tab控制器有两种：

TabBarIOS，仅适用于IOS平台

ViewPagerAndroid，仅适用于Android平台(严格来讲并不算，因为我们还需要自己实现Tab)

如果我们需要一个更通用的Tab控制器，那么就要借助开源的力量，本篇文章教你如何使用

react-native-scrollable-tab-view，这是官方Demo的效果

demo.gif

demo-fb.gif

一、准备工作

新建一个项目

react-native init Demo6

添加react-native-scrollable-tab-view

npm install react-native-scrollable-tab-view --save

二、Props介绍

renderTabBar(Function:ReactComponent)

TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar。当然，我们也可以自定义一个，我们会在下篇文章重点讲解如何去自定义TabBar样式。

render() {

return (

renderTabBar={() => }>

);

}

注意：每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字

D