react-native-scrollable-tab-view是一款可以实现顶部的Tab切换和底栏切换的第三方库,常用于顶部Tab切换。
在HT项目中,我用其实现日周月年运动数据页面的切换,其效果如下图所示:
2.1 准备工作
与其他第三方库的用法一样,需要先install再import,然后就可以使用啦。
(1)进入项目目录下,执行如下命令行
npm install react-native-scrollable-tab-view --save
(2)在.js文件中引入
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
2.2 小栗子
以下就是顶部Tab切换栏的基本写法:
import React,{Component} from 'react';
import {View,Text,StyleSheet,ScrollView} from 'react-native';
import ScrollableTabView, {DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view';
export default class MySport extends Component{
render(){
return(
<View>
<ScrollableTabView
style={styles.container}
renderTabBar={()=> <DefaultTabBar />}
tabBarBackgroundColor='#fff'
tabBarActiveTextColor='#5ebfff'
tabBarInactiveTextColor='#333'
tabBarUnderlineStyle={styles.lineStyle}
>
<ScrollView tabLabel='日'>
<Text>日运动</Text>
</ScrollView>
<ScrollView tabLabel='周'>
<Text>周运动</Text>
</ScrollView>
<ScrollView tabLabel='月'>
<Text>月运动</Text>
</ScrollView>
<ScrollView tabLabel='年'>
<Text>年运动</Text>
</ScrollView>
</ScrollableTabView>
</View>
)
}
}