选项按钮组件

更新时间：2022-01-07 02:25:23下载pdf

TabsBar 组件，可以传入一个数据数组，生成对应的按钮 Tab 栏。

TabsBar

竖直
水平

组件公有属性

字段名	类型	描述	默认值
horizontal	Boolean	是否水平	true
dataSource	{ label: string; value: string / number; unSelectedIcon?: ReactNode }[]	数据源	无
itemStyle	ViewStyle	每一项的样式	{}
value	String/Number	值(受控)	undefined
defaultValue	String/Number	默认值(非受控)	undefined
disabled	Boolean	禁用	false
disabledOpacity	Number	禁用时的透明度	0.6
divider	Boolean	分割线	true
dividerStyle	ViewStyle	分割线样式	{}
style	ViewStyle	容器样式	{}
activeItemStyle	ViewStyle	选中项样式	{}
textStyle	TextStyle	文字样式	{}
activeTextStyle	TextStyle	选中项文字样式	{}
onChange	(value: string / number) => void	切换时回调	()=>{}

使用示例

import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { Utils } from 'tuya-panel-kit';
import { TabsBar } from '@tuya/tuya-panel-lamp-sdk';

const { convertX: cx } = Utils.RatioUtils;
const RadioScene = () => {
  const [radioValue, setRadioValue] = useState<string | number>('TEST0');

  const dataList = [
    ...Array.from('4321').map(i => ({
      label: `${5 - +i}`,
      value: `TEST${5 - +i}`,
    })),
  ];
  return (
    <TabsBar
      dataSource={dataList}
      onChange={(e: number | string) => {
        setRadioValue(e);
      }}
      dividerStyle={styles.dividerStyle}
      value={radioValue}
      style={styles.style}
      activeItemStyle={styles.activeItemStyle}
      textStyle={styles.textStyle}
      activeTextStyle={styles.activeTextStyle}
    />
  );
};
const styles = StyleSheet.create({
  activeItemStyle: {
    backgroundColor: '#87cefa',
    borderRadius: cx(10),
  },
  activeTextStyle: {
    color: '#87ce',
    fontSize: cx(15),
    fontWeight: '700',
  },
  dividerStyle: {
    backgroundColor: '#fff',
    height: '100%',
    width: cx(3),
  },
  style: {
    backgroundColor: '#a6e22e',
    borderRadius: cx(12),
    borderWidth: 0,
    height: cx(50),
    marginTop: cx(20),
    width: cx(300),
  },

  textStyle: {
    color: '#fff',
    fontSize: cx(20),
    fontWeight: '700',
  },
});
export default RadioScene;

上一篇倒计时子页面组件

下一篇普通定时