选择设备组件

更新时间：2021-11-05 06:09:48下载pdf

选择设备组件

组件预览图

组件属性

字段名	类型	描述	默认值
activeOpacity	number	触摸时视图的不透明度	0.9
dataSource	Array<DevInfo>	设备列表	[]
selectLimit	number	可勾选项数量上限	无
containerStyle	StyleProp<ViewStyle>	最外层容器样式	{}
tipContainerStyle	StyleProp<ViewStyle>	提示文字的容器样式	{}
tipText	string	提示文字	“请选择要添加的子设备”
tipTextStyle	StyleProp<TextStyle>	提示文字样式	{}
offlineText	string	离线文字	”设备离线“
offlineTextStyle	StyleProp<TextStyle>	离线文字样式	{}
selectAllText	string	全选按钮的文字	“全选”
selectAllTextStyle	StyleProp<TextStyle>	全选文字的样式	{}
listStyle	StyleProp<ViewStyle>	设备列表的样式	{}
activedTintColor	string	勾选框选中时的tintColor值	‘#3566FF’
disabledTintColor	string	勾选框禁选时的tintColor值	‘#DBDBDB’
normalTintColor	string	勾选框未选中时的tintColor值	无
onSelectChange	function	勾选项改变时触发的事件，入参为已勾选的设备devId列表	无
renderOfflineState	function	添加设备完成时的事件	无

使用示例

import React, { FC, useState, useEffect } from 'react';
import { SelectDevice } from '@tuya/tuya-panel-gateway-sdk';
import { TYSdk } from 'tuya-panel-kit';

const Example: FC = () => {
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    getSubDevList();
  }, []);

  const getSubDevList = () => {
    TYSdk.native.getDeviceList(
      (res: any) => {
        setDataSource(res);
      },
      (err: any) => {
        console.log(err);
      }
    );
  };

  return (
    <SelectDevice
      dataSource={dataSource}
      selectLimit={128}
      tipText="请选择要添加的子设备"
      tipTextStyle={{ fontSize: 14, color: 'lightblue' }}
      offlineText="设备离线"
      offlineTextStyle={{ color: '#FFF' }}
      selectAllText="全选"
      selectAllTextStyle={{ color: 'red' }}
      onSelectChange={res => console.log(res)}
    />
  );
};