react-native 滑动标题栏

在我们的应用中经常有上面显示一行标题栏，下面分别每个标题对应一个页面，标题栏与页面联动的情形，在Android中我们可以简单用Toolbar和ViewPager来实现，react-native中至今还没有提供原生的组件供我们来应用，但我们可以通过依赖github大神skv-headless的react-native-scrollable-tab-view（https://github.com/skv-headless/react-native-scrollable-tab-view）来实现相应的功能。 首先我们还是要切换到我们的项目目录下，运行 npm install react-native-scrollable-tab-view –save，来将项目依赖进我们的项目中。 现在，我们就可以在我们的项目中使用。首先

import ScrollableTabView from 'react-native-scrollable-tab-view';

再将ScrollableTabView组件添加进我们的代码中：

<ScrollableTabView renderTabBar={()=><CustomTabBar/>} style={{flex:1,backgroundColor:'white'}} tabBarBackgroundColor="white" tabBarInactiveTextColor="#494949" tabBarActiveTextColor="#00A9F2" tabBarUnderlineStyle={{backgroundColor:'#00A9F2'}} > <FindList tabLabel="精选"/> <FindList tabLabel="同城"/> <FindList tabLabel="资讯"/> <FindList tabLabel="活动"/> <FindList tabLabel="话题"/> </ScrollableTabView> renderTabBar 可以指定我们自定义TabBar组件tabBarBackgroundColor tabBar背景的颜色tabBarInactiveTextColor tab没有被选中时的字体颜色tabBarActiveTextColor tab被选中时的字体颜色tabBarUnderlineStyle 定义下划线的样式tabBarTextStyle 设置tab文本的样式 例：{fontFamily: ‘Roboto’, fontSize: 15}initialPage number 设置初始选中的page

FindList是对应滑动的页面，tabLabel即为该页面对应的tab文本值。

截图：

源码