【React Native第三方库的使用】react-native-scrollable-tab-view实现Tab切换

一、概述

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(
			
				 }
					tabBarBackgroundColor='#fff'
					tabBarActiveTextColor='#5ebfff'
					tabBarInactiveTextColor='#333'
					tabBarUnderlineStyle={styles.lineStyle}
					>
					
						日运动
					

					
						周运动
					

					
						月运动
					

					
						年运动
					
				
			
		)
	}
}