笔记一之Text

属性

  1. numberOfLines 文本行数限制,添加后超过限制行数文本会在末尾默认以...的形式省略。

  2. ellipsizeMode 设置文本缩略格式,配合numberOfLines使用,values:

  • tail:在末尾...省略(默认值)
  • clip:在末尾切割,直接切割字符无省略符
  • head:在前面...省略
  • middle:在中间...省略
  1. onPress 点击事件

  2. style 样式

样式

  1. color 字体颜色

  2. fontSize 字体大小

  3. fontFamily 字体

  4. fontStyle 字的样式 (normal:正常 italic:斜体)

  5. fontWeight 设置粗体(normal:正常 bold:粗体100,200,300, 400, 500, 600, 700, 800, 900)

6.lineHeight 行高

7.textAlign 文字对其方式(auto:自动对齐left:左对齐right:右对齐 center:居中对齐)

8: textDecorationLine 下划线和删除线样式(none:无线underline:下划线line-through:删除线 underline line-through:下划线和删除线)

export default class Lession01 extends Component {



    onVBTextClick() {

        console.log('--click--');

    }



  render() {

    return (

      <View style={styles.container}>

        <Text 

            style={styles.vb_text} 

            numberOfLines={2} 

            onPress={this.onVBTextClick} 

            ellipsizeMode='tail'

            >

            On Thanksgiving, celebrated in America on the last Thursday of November, 

            friends and families gather around tables to feast and give   thanks. 

            This holiday has origins dating back nearly 400 years when early American 

            settlers met the Native American Wampanoag people.

        </Text>

       </View>

    );

  }

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

  vb_text: {

    color: '#333333',

    fontFamily: 'Times',

    margin: 10,

    fontSize: 12,       

    textAlign: 'auto',

    lineHeight: 22,     //行高

    fontStyle: 'italic',    //设置文字:normal:正常体;italic:斜体

    fontWeight: 'bold', //设置粗体    字,'normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'

    textDecorationLine: 'underline line-through',//下划线和删除线的样式:['none' /*default*/, 'underline', 'line-through', 'underline line-through'

  },

});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,038评论 1 4
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,060评论 0 0
  • 本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记,方便回顾书上的知识,另一篇为Hea...
    兼续阅读 1,858评论 0 17
  • 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人...
    珍此良辰阅读 37,693评论 5 19
  • 田露 扬州市方圆建筑工程有限公司 【日精进打卡第34天】 【知~学习】 《六项精进》5遍共129遍 《大学》5遍共...
    橙子_ea3b阅读 149评论 0 1