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
  • 相关阅读:
    cdoj 841 休生伤杜景死惊开 逆序数/树状数组
    Codeforces Round #296 (Div. 1) B. Clique Problem 贪心
    【NOIP2014】联合权值 树上dp
    【NOIP2014】生活大爆炸版石头剪刀布
    BZOJ 2756: [SCOI2012]奇怪的游戏 网络流/二分
    BZOJ 1012: [JSOI2008]最大数maxnumber 单调队列/线段树/树状数组/乱搞
    BZOJ 1036: [ZJOI2008]树的统计Count 树链剖分
    BZOJ 1854: [Scoi2010]游戏 并查集
    BZOJ 1008 [HNOI2008]越狱 排列组合
    BZOJ 1003 物流运输trans dijstra+dp
  • 原文地址:https://www.cnblogs.com/itgungnir/p/6443878.html
Copyright © 2011-2022 走看看