English
English
简体中文
Contact Us
Register
Log In
layoutIndex

Tab

Last Updated on : 2022-03-01 07:55:04download

Overview

Tab is used to switch between different pages.

Code demo

Note: for more information, see 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> ); } }

API

style

Specify the style of the container that wraps the tab bar.

Type Required
ViewPropTypes.style No

activeKey

The key of the activated view.

Type Required
number|string No

defaultActiveKey

The key of the view that is activated by default.

Type Required
number|string No

onChange

The callback of switching the view. The parameters are as follows:

  • activeKey: the key of the activated view.
Type Required
(activeKey) => void No

tabStyle

Set the style of the tab.

Type Required
ViewPropTypes.style No

tabBarStyle

Set the style of the tabBar.

Type Required
ViewPropTypes.style No

tabContentStyle

Set the style of the content area of the tab bar.

Type Required
ViewPropTypes.style No

tabsContainerStyle

Set the style of the container that wraps the tabBar.

Type Required
ViewPropTypes.style No

tabBarBackgroundColor

Set the background color of the tabBar.

Type Required
ViewPropTypes.style No

tabBarUnderlineStyle

Set the underline style of the tabBar.

Type Required
ViewPropTypes.style No

tabTextStyle

Set the style of the text in the tab bar.

Type Required
Text.propTypes.style No

tabActiveTextStyle

Set the style of the text in the activated tab bar.

Type Required
Text.propTypes.style No

tabBarPosition

The position of the tabBar.

Type Required Default value
enum(top、bottom) No top

animated

Whether the switching view has animation.

Type Required Default value
bool No true

swipeable

Whether to slide the view.

Type Required Default value
bool No true

useViewPagerOnAndroid

Whether to use viewPager on Android.

Type Required Default value
bool No true

children

Child element. See Tab.TabPane.

Type Required
element|array No

TabPane API

key

The key of the view.

Type Required
string|number Yes

tabWidth

The width of each tab bar.

Type Required
number No

tab

Text or custom elements on the tab bar.

Type Required
string| React.ReactNode No