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

电话咨询

在线咨询

400-881-8611