带高斯模糊的温湿度组件

更新时间:2021-08-10 01:51:27下载pdf

带高斯模糊的温湿度组件

预览图

带高斯模糊的温湿度组件

组件属性

字段名 类型 描述 默认值
containerStyle StyleProp<ViewStyle> 最外层容器的样式 {}
blurType ‘xlight’ | ‘light’ | ‘dark’ 模糊的类型 ‘xlight’
blurAmount number 模糊程度,数字越大越模糊。范围0 - 100 10
blurViewStyle StyleProp<ViewStyle> 模糊容器的样式 {}
showSplit boolean 是否显示中间分隔线 true
showTemperature boolean 是否显示温度 true
temperatureLabel string 温度的标签文字 ‘温度’
temperatureValue number 温度的值 20
temperatureUnit ‘℃’ | ‘℉’ 温度的单位 ‘℃’
temperatureIcon ImageSourcePropType 温度的图片,传空则不显示 本地图片
showHumidity boolean 是否显示湿度 true
humidityLabel string 湿度的标签文字 ‘湿度’
humidityValue number 湿度的值 32
humidityUnit string 湿度的单位 ‘%’
humidityIcon ImageSourcePropType 湿度的图片 本地图片
labelStyle StyleProp<TextStyle> 标签文字的样式 {}
valueStyle StyleProp<TextStyle> 数值文字的样式 {}
unitStyle StyleProp<TextStyle> 单位文字的样式 {}
iconStyle StyleProp<ImageStyle> 图片的样式 {}
renderSplit () => JSX.Element | null 分割线的render函数 null
renderTemperature () => JSX.Element | null 温度模块的render函数 null
renderHumidity () => JSX.Element | null 湿度模块的render函数 null

使用示例

import { TempHumWithBlur } from '@tuya/tuya-panel-gateway-sdk';

// 正常使用
<TempHumWithBlur />

// 修改温度和湿度值
<TempHumWithBlur temperatureValue={10} humidityValue={88} />

// 修改文字样式
<TempHumWithBlur valueStyle={{ color: 'yellow' }} unitStyle={{ color: 'pink' }} />

// 修改温度、湿度单位
<TempHumWithBlur temperatureUnit="F" humidityUnit="‰" />

// 仅显示温度
<TempHumWithBlur  showHumidity={false} />