更新时间:2021-08-27 11:08:38下载pdf
刻度尺组件,常用于设定目标、选择体重身高等场景。
字段名 | 类型 | 描述 | 默认值 |
---|---|---|---|
min | number | 刻度最小值 | 0 |
max | number | 刻度最大值 | 100 |
value | number | 刻度当前值 | 0 |
value | number | 刻度当前值 | 0 |
title | string | 标题 | null |
scaleShortHeight | number | 短刻度高度 | 32 |
scaleMiddleHeight | number | 中等刻度高度 | 37 |
scaleLongHeight | number | 长刻度高度 | 46 |
scaleColor | string | 刻度颜色 | #333 |
titleStyle | StyleProp |
标题样式 | |
valueStyle | StyleProp |
value样式 | |
pointerStyle | StyleProp |
点的样式 | |
onChange | function | 滑动完成的回调 | |
formatValue | function | 格式化值的函数 | v => v |
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Utils } from 'tuya-panel-kit';
import { ScrollRuler } from '@tuya/tuya-panel-health-sdk';
import Section from '../Section';
const { convertX: cx } = Utils.RatioUtils;
const lang = {
en: {
dsc_default: 'Default',
dsc_custom: 'Custom Dark background',
},
zh: {
dsc_default: '默认效果',
dsc_custom: '自定义展示',
},
};
const getLang = key => {
return lang.en[key];
};
export default class Index extends Component {
state = {};
handleChange = (v: number) => {
console.log('changev', v);
};
render() {
const themeColor = 'pink';
const themeColor2 = '#34C495';
return (
<View style={{ flex: 1, padding: cx(20) }}>
<Section title={getLang('dsc_default')}>
<ScrollRuler
min={0}
max={60}
scaleColor={themeColor}
valueStyle={{ color: themeColor }}
titleStyle={{ color: themeColor }}
pointerStyle={{ borderBottomColor: themeColor }}
title="体重"
onChange={this.handleChange}
/>
</Section>
<Section title={getLang('dsc_default')}>
<ScrollRuler
min={10}
max={20}
scaleColor={themeColor2}
valueStyle={{ color: themeColor2 }}
titleStyle={{ color: themeColor2 }}
pointerStyle={{ borderBottomColor: themeColor2 }}
title="身高"
value={17}
formatValue={v => `${v * 10}cm`}
onChange={this.handleChange}
/>
</Section>
</View>
);
}
}
const styles = StyleSheet.create({});
该内容对您有帮助吗?
是意见反馈该内容对您有帮助吗?
是意见反馈