在我们的应用中经常有上面显示一行标题栏,下面分别每个标题对应一个页面,标题栏与页面联动的情形,在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文本值。
截图: