UnitText

Overview

UnitText is used to show the display type text.

Code demo

import React from "react";
 import { ScrollView } from "react-native";
 import { UnitText } from "tuya-panel-kit";
 import svgs from "tuya-panel-kit/src/components/iconfont/svg/defaultSvg"; // eslint-disable-line
 import svgsART from "tuya-panel-kit/src/components/iconfont/art/defaultSvg"; // eslint-disable-line
 import TesterTitle from "../../components/TesterTitle";
 
const UnitTextScene = () => {
  return (
    <ScrollView style={{ flex: 1, marginTop: 16 }}>
      <TesterTitle title="Basic UnitText" />
      <UnitText
        value="99"
        size={36}
        unit="celsius"
        valueColor="red"
        unitColor="red"
      />
      <TesterTitle title="Customize the color of each value of UnitText" />
      <UnitText
        value="032"
        size={36}
        unit={svgs.fahrenheit}
        valueColor="red"
        valueColors={["rgba(0, 0, 0, 0.3)", undefined, "blue"]}
        unitColor="red"
      />
 
     <TesterTitle title="Basic UnitText (ART version)" />
      <UnitText
        useART={true}
        value="99"
        size={50}
        unit="celsius"
        valueColor="red"
        unitColor="red"
      />
      <TesterTitle title="Customize the color of each value of UnitText (ART version)" />
      <UnitText
        useART={true}
        value="032"
        size={50}
        unit={svgsART.fahrenhei}
        valueColor="red"
        valueColors={["rgba(0, 0, 0, 0.3)", undefined, "blue"]}
        unitColor="red"
      />
    </ScrollView>
  );
 };
 
export default UnitTextScene;

API

style

The style of the outer container of the UnitText component.

size

The font size of the UnitText component. size is the abbreviation of valueSize or unitSize.

• valueSize value is the same as the size value.
• unitSize value is one half of the size value.

value

The numerical value displayed by the UnitText component.

valueSize

The value of the numerical value in the UnitText component.

valueColor

The color of the numerical value in the UnitText component.

valueColors

The color of each numerical value in the UnitText component, which can be set separately.

unit

The setting of the unit in the UnitText component. The string of unit parameter value is the built-in SVG name. For IconFont built-in font images, see IconFont.

unitSize

The size of the unit in the UnitText component.

unitColor

The color of the unit in the UnitText component.

unitPaddingLeft

The left padding of the unit in the UnitText component.

unitPaddingTop

The top padding of the unit in the UnitText component.