Tab 标签栏

更新时间:2024-06-05 03:14:34下载pdf

简介

Tab 标签栏用于在不同页面间进行切换。

代码演示

说明:详细示例参考 Demo

import React from "react"; import { Text } from "react-native"; import { Tab } from "tuya-panel-kit"; export default class TabDemo extends React.PureComponent { constructor(props) { super(props); this.state = { tab: "1" }; } render() { const tabPaneArr = [1, 2, 3, 4]; const contentStyle = { height: 200, color: "#333", textAlign: "center", lineHeight: 200, backgroundColor: "#fff", }; const tabPanes = tabPaneArr.map((item) => ( <Tab.TabPane key={`${item}`} tab={`${item}`}> <Text style={contentStyle}>{`The No.${item} Tab`}</Text> </Tab.TabPane> )); return ( <Tab activeKey={this.state.tab} onChange={(value) => this.setState({ tab: value })} > {tabPanes} </Tab> ); } }

交互演示

Tab 标签栏

API

style

包裹标签栏的容器的样式。

类型 必传
ViewPropTypes.style

activeKey

所激活视图的 key

类型 必传
number|string

defaultActiveKey

默认激活视图的 key

类型 必传
number|string

onChange

切换视图的回调,参数如下:

  • activeKey:所激活视图的 key
类型 必传
(activeKey) => void

tabStyle

设置标签栏的样式。

类型 必传
ViewPropTypes.style

tabBarStyle

设置 tabBar 的样式。

类型 必传
ViewPropTypes.style

tabContentStyle

设置标签栏内容区域的样式。

类型 必传
ViewPropTypes.style

tabsContainerStyle

设置包裹 tabBar 的容器的样式。

类型 必传
ViewPropTypes.style

tabBarBackgroundColor

设置 tabBar 的背景颜色。

类型 必传
ViewPropTypes.style

tabBarUnderlineStyle

设置 tabBar 的下划线样式。

类型 必传
ViewPropTypes.style

tabTextStyle

设置标签栏内文字的样式。

类型 必传
Text.propTypes.style

tabActiveTextStyle

设置激活的标签栏内文字的样式。

类型 必传
Text.propTypes.style

tabBarPosition

tabBar 的位置。

类型 必传 默认值
enum(top、bottom) top

animated

切换视图是否有动画。

类型 必传 默认值
bool true

swipeable

是否可滑动视图。

类型 必传 默认值
bool true

useViewPagerOnAndroid

是否在安卓上使用 viewPager

类型 必传 默认值
bool true

children

子元素,参考Tab.TabPane

类型 必传
element|array

TabPane API

key

视图的标识。

类型 必传
string|number

tabWidth

每个标签栏的宽度。

类型 必传
number

tab

标签栏上文字或者自定义的元素。

类型 必传
string| React.ReactNode