选择设备组件

更新时间:2021-09-17 01:08:16下载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)}
    />
  );
};