首页 > 代码库 > 【RN - 基础】之Text使用简介

【RN - 基础】之Text使用简介

2024-09-06 01:58:01   217人阅读

基本用法

　　Text组件是React Native中的一个重要组件，相当于iOS中的UILabel和Android中的TextView。Text组件用来存放文本数据。下面是一个简单的例子：

import React, { Component } from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from ‘react-native‘
var PerfectProject = React.createClass({
    render: function () {
        return (
            <Text style={styles.outerText}>I am learning React Native!
              <Text style={styles.innerText}>Please study hard!</Text>
            </Text>
        );
    },
});
var styles = StyleSheet.create({
    outerText: {
        margin: 40,
        textAlign: ‘center‘,
        color: ‘red‘,
        fontSize: 28,
        fontFamily: ‘Cochin‘
    },
    innerText: {
        color: ‘green‘,
        fontWeight: ‘bold‘,
    },
});
AppRegistry.registerComponent(‘PerfectProject‘, () => PerfectProject);

　　运行效果如下图所示：

技术分享

　　【注意】：这里使用了Text组件的一个特性：嵌套，子Text中可以继承父Text中的属性和样式，但是这种特性遵循就近原则，即如果子Text中有部分属性或样式和父Text中的属性或样式冲突，则结果显示为子Text中的属性或样式。

 

属性

　　numberOfLines：设置Text组件显示文本的行数，如果文本行数超过设置的值，则多余的部分将不会显示。

 

Style

名称作用Value
color 字体颜色 值的形式有多种
fontFamily 字体名称 自行查看相关字体
fontSize 字体大小 值为 数字
fontStyle 字体风格 enum(‘normal’,’italic’)
fontWeight 字体粗细权重 enum(‘normal’,’bold’,’100’,’200’,’300’,’400’,’500’,’600’,’700’,’800’,’900’),指定字体粗细，normal和bold适用于大多数字体，不是所有的字体的值都能用数字值，在这种情况下，最接近的值被选择。
lineHeight 行高 数字（number）
textAlign 文本对齐方法 enum(‘auto’,’left’,’right’,’center’,’justify’) 指定文本对齐方式，‘justify’值只支持iOS,在Android上会自动回退到left。
textDecorationLine 横线位置 enum(‘none’, ‘underline’, ‘line-through’, ‘underline line-through’)
textShadowColor 阴影效果颜色 值的形式有多种
textShadowOffset 设置阴影效果 {width:number,height:number}
textShadowRadius 阴影效果圆角 数字(number)
textAlignVertical 文本垂直对齐方式 enum(‘auto’,’top’,’bottom’,’center’) 不支持iOS，只支持Android
letterSpacing 字符间距 数字(number)只支持iOS，不支持Android
textDecorationColor 值的形式有多种，color只支持iOS，不支持Android  
textDecorationStyle 横线的风格 enum(‘solid’,’double’,’dotted’,’dashed’)只支持iOS，不支持Android
writingDirection 文本方向 enum(‘auto’,’ltr’,’rtl’)只支持iOS，不支持Android

【RN - 基础】之Text使用简介


联系
我们