运动-有目标组件

更新时间：2021-11-18 09:28:14下载pdf

SportTarget

组件预览图

组件属性

字段名	类型	描述	必传	默认值
curStep	number	当前值	是	0
targetSteps	number	目标值	是	1
targetText	string	目标描述	是	空
percentText	string	百分比描述	是	空
themeColor	string	主题色	是	空
centerView	ICenterProps	中心区域的view	是	无

ICenterProps属性

字段名	类型	描述	必传	默认值
bgImage	number	圆盘背景图	是	0
children	React.ReactNode	子组件	是	无

使用示例

import React from 'react';
import { View } from 'react-native';
import { SportTargetContent, SportTarget } from '@tuya/tuya-panel-outdoor-sdk';
import icons from './res/icons';
import Res from './res';

const Component = () => {
  const themeColor = '#0376FF';
  const step = 100;
  const target = 200;

  return (
    <View style={{ flex: 1, backgroundColor: '#FFF', paddingTop: 10 }}>
      <SportTarget
        curStep={step}
        targetSteps={target}
        targetText={`今日目标 ｜ ${step}步`}
        percentText="你已经完成了目标的"
        themeColor={themeColor}
        centerView={{
          bgImage: Res.sport_clock,
          children: (
            <SportTargetContent
              step={step}
              targetIcon={icons.target}
              targetIconColor={themeColor}
              stepColor={themeColor}
              stepValue="步"
              stepOpacity={0.5}
            />
          ),
        }}
      />
    </View>
  );
};

export default Component;

上一篇运动-无目标组件

下一篇电池组件