TYText 文字

更新时间:2024-06-05 03:14:34下载pdf

简介

React Native 中,Text 组件的默认属性在 Android 和 iOS 上表征不一致。TYTextText 组件的基础上进行开发,实现了 TYText 的属性在 iOS 端和 Android 端表征保持一致。

代码演示

说明:详细示例可参考 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="自定义大小 36px" /> <TYText style={{ fontSize: 36, textAlign: "center" }} text="自定义大小 36px" /> </ScrollView> ); }; TYTextScene.propTypes = { theme: PropTypes.object.isRequired, }; export default withTheme(TYTextScene);

交互演示

TYText 文字

API

TYText的属性继承自 Text

style

文字的样式。

类型 必传 默认值
Text.propTypes.style null

type

字体类型。

类型 必传 默认值
'heading' | 'title' | 'paragraph' null

size

字体的大小。

类型 必传 默认值
'large' | 'normal' | 'small' | number null

注意: typesize 属性都设置为枚举值时,会从主题中获取对应值。例如,设置 type: 'heading',size: 'small'时,则会去 text.heading.small 获取对应的字体大小和字体行高。

align

字体对齐方式。

类型 必传 默认值
'left' | 'center' | 'right' null

weight

字体粗细。

类型 必传 默认值
number | string null

color

字体颜色。

类型 必传 默认值
ColorPropType #333

text

显示文字。

类型 必传 默认值
string null

Methods

setText

设置 TYText 组件内的文字。

static setText(text)