Tab

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