带高斯模糊的温湿度组件

更新时间：2021-08-27 11:07:45下载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} />

上一篇带圆弧的顶部栏组件