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

最新推荐文章于 2024-09-14 07:10:19 发布

FloraCat_染小白

最新推荐文章于 2024-09-14 07:10:19 发布

阅读量1.8k

点赞数

文章标签： React Native 移动开发

本文链接：https://blog.csdn.net/u014322206/article/details/81407206

版权

一、概述

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