码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-02-26 12:24:45      阅读:438      评论:0      收藏:0      [点我收藏+]

标签:auto   set   tde   大小   对齐   center   fonts   code   字符   

基本用法

  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使用简介

标签:auto   set   tde   大小   对齐   center   fonts   code   字符   

原文地址:http://www.cnblogs.com/itgungnir/p/6443878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!