运动-有目标组件

更新时间: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;