滚动刻度尺组件

更新时间:2021-08-27 11:08:38下载pdf

ScrollRuler

组件描述

刻度尺组件,常用于设定目标、选择体重身高等场景。

组件预览图

滚动刻度尺组件

组件属性

字段名 类型 描述 默认值
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({});