TYText

Last Updated on : 2024-06-05 03:14:34download

Overview

In React Native, the default properties of the Text component are inconsistent on Android and iOS. TYText is developed on the basis of the Text component. The properties of TYText are consistent on iOS and Android.

Code demo

Note: for more information, see Demo.

import React from "react"; import PropTypes from "prop-types"; import { ScrollView, View } from "react-native"; import { TYText, Utils, defaultTheme } from "tuya-panel-kit"; const { withTheme } = Utils.ThemeUtils; const TYTextScene = (props) => { const typeMap = ["heading", "title", "paragraph"]; const sizeMap = ["large", "normal", "small"]; return ( <ScrollView> {typeMap.map( => sizeMap.map((size, idx) => { const { fontSize } = defaultTheme.text[type][size](props.theme); return ( <View key={`${type}-${size}`} style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", minHeight: 36, }} > <TYText>{`${type}-${size}`}</TYText> <TYText type={type} size={sizeMap[idx]}>{`${fontSize}px`}</TYText> </View> ); }) )} {/* Custom Size Text */} <TYText color="red" align="center" weight="bold" size={36} text="Custom size 36px" /> <TYText style={{ fontSize: 36, textAlign: "center" }} text="Custom size 36px" /> </ScrollView> ); }; TYTextScene.propTypes = { theme: PropTypes.object.isRequired, }; export default withTheme(TYTextScene);

API

TYText properties are inherited from Text.

style

The text style.

Type Required Default value
Text.propTypes.style No null

type

The font type.

Type Required Default value
'heading' | 'title' | 'paragraph' No null

size

The font size.

Type Required Default value
'large' | 'normal' | 'small' | number No null

Note: When both the type and size properties are set to enumerated values, the corresponding values will be obtained from the theme. For example, when you set type:'heading', size:'small', it will go to text.heading.small to obtain the corresponding font size and font line height.

align

Alignment of the font.

Type Required Default value
'left' | 'center' | 'right' No null

weight

The font weight.

Type Required Default value
number | string No null

color

The font color.

Type Required Default value
ColorPropType No #333

text

The displayed text.

Type Required Default value
string Yes null

Methods

setText

Set the text in the TYText component.

static setText(text)