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

隗轶
2023-12-01

一、概述

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>
		)
	}
}

 

 类似资料: