Tab标签栏

Tab 标签栏

概述

1.0开始加入

Tab是一个标签栏组件，用于让用户在不同的视图中进行切换

代码演示

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

包裹tab的容器样式

类型(Type)	必传(Required)
ViewProptypes.style	否

activeKey

所激活视图的key

类型(Type)	必传(Required)
number/string	否

defaultActiveKey

默认激活视图的key

类型(Type)	必传(Required)
number/string	否

onChange

切换视图的回调，参数如下：

• activeKey：所激活视图的key

类型(Type)	必传(Required)
(activeKey) => void	否

tabStyle

设置每个tab的样式

类型(Type)	必传(Required)
ViewProptypes.style	否

tabBarStyle

设置tabBar的样式

类型(Type)	必传(Required)
ViewProptypes.style	否

tabsContainerStyle

设置包裹tabBar的容器样式

类型(Type)	必传(Required)
ViewProptypes.style	否

tabBarUnderlineStyle

设置tabBar的下划线样式

类型(Type)	必传(Required)
ViewProptypes.style	否

tabTextStyle

设置tab内文字样式

类型(Type)	必传(Required)
Text.propTypes.style	否

tabActiveTextStyle

设置激活的tab内文字样式

类型(Type)	必传(Required)
Text.propTypes.style	否

animated

切换视图是否有动画

类型(Type)	必传(Required)	默认值
bool	否	true

swipeable

是否可滑动视图

类型(Type)	必传(Required)	默认值
bool	否	true

children

子元素，参考Tab.TabPane

类型(Type)	必传(Required)
element, array	否

TabPane API

key

视图的标识

类型(Type)	必传(Required)
string/number	是

tabWidth

每个tab的宽度

类型(Type)	必传(Required)
number	否

tab

tab上文字或者自定义的元素

类型(Type)	必传(Required)
React.ReactNode	否