Targetless Pedometer

Last Updated on : 2021-11-19 08:42:55

SportNoTarget

Preview

Properties

Field name	Type	Description	Required	Default value
style	ViewStyle \| TextStyle \| ImageStyle	The style of the outermost container.	Yes	{}
bgImage	number	The background image.	Yes	0
centerImage	number	The image of the target.	Yes	0
spotImage	number	The number of steps.	Yes	0
centerView	React.ReactNode	The sub-component.	Yes	None

Example

import React from 'react';
import { View } from 'react-native';
import { SportNoTarget, SportTargetContent } from '@tuya/tuya-panel-outdoor-sdk';
import { Utils } from 'tuya-panel-kit';
import icons from './res/icons';
import images from './res/index';

const { convertX: cx } = Utils.RatioUtils;

const Component = () => {
  return (
    <View style={{ flex: 1, backgroundColor: '#FFF', paddingTop: 10 }}>
      <View style={{ height: cx(400) }}>
        <SportNoTarget
          style={{ backgroundColor: '#0376FF' }}
          bgImage={images.sport_border_circle1}
          centerImage={images.sport_target_content}
          spotImage={images.step_spot1}
          centerView={
            <SportTargetContent
              step={100}
              targetIcon={icons.target}
              targetIconColor="blue"
              stepColor="blue"
              stepValue="step"
              stepOpacity={0.5}
            />
          }
        />
      </View>
    </View>
  );
};
export default Component;

Prev DocCalendar List

Next DocTarget Pedometer