zoukankan      html  css  js  c++  java
  • 【RN

    基本用法

      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 设置阴影效果 {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
  • 相关阅读:
    volatile关键字
    线程的状态
    java中的匿名内部类
    java高精度实数和小数
    JS、JSP、ASP、CGI
    论文结构要求
    java中的标识符、关键字、保留字
    java IODemo
    Bagging和Boosting的区别
    由Memcached升级到 Couchbase的 Java 客户端的过程记录(一)
  • 原文地址:https://www.cnblogs.com/itgungnir/p/6443878.html
Copyright © 2011-2022 走看看