React Native常用组件之Text

2016-02-20 22:24小小哆iOSDev,React Native相关评论(0)

一、什么是Text组件

  • 一个用于显示文本的React组件;
  • 和Android中的TextView组件相类似用来显示基本的文本信息;
  • 除了基本的显示布局之外,可以进行嵌套显示,设置样式,以及可以做事件(例如:点击)处理;
  • 演示案例:

二、Text组件常用的属性方法

  • allowFontScaling (bool):控制字体是否根据iOS的设置进行自动缩放-iOS平台,Android平台不适用
  • numberOfLines (number):进行设置Text显示文本的行数,如果显示的内容超过了行数,默认其他多余的信息就不会显示了
  • onLayout (function): 当布局位置发生变动的时候自动进行触发该方法, 其中该function的参数如下:
    [code lang="" start="" highlight=""]{nativeEvent: {layout: {x, y, width, height}}}[/code]
  • onPress (fcuntion): 该方法当文本发生点击的时候调用该方法
  • color:字体颜色
  • fontFamily :字体名称
  • fontSize 字体大小
  • fontStyle 字体风格(normal,italic)
  • fontWeight 字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
  • textShadowOffset 设置阴影效果{width: number, height: number}
  • textShadowRadius 阴影效果圆角
  • textShadowColor 阴影效果的颜色
  • letterSpacing 字符间距
  • lineHeight 行高
  • textAlign 文本对其方式("auto", 'left', 'right', 'center', 'justify')
  • textDecorationLine 横线位置 ("none", 'underline', 'line-through', 'underline line-through')
  • textDecorationStyle 线的风格("solid", 'double', 'dotted', 'dashed')
  • textDecorationColor 线的颜色
  • writingDirection 文本方向("auto", 'ltr', 'rtl')

三、Text组件中样式的继承

在React-native中是没有样式继承这种说法的, 但是对于Text元素里边的Text元素,其实是能够继承的,那么是单层继承还是多层继承?
代码演示:
1副本.png

运行结果:
2副本.png
结论:文字控制类的属性也是多重继承的,和css中是一样的

上一篇 React Native的FlexBox布局指南React Native常用组件之Image 下一篇
评论 0
由于之前使用多说插件出现问题,导致以前的评论丢失,在此深表歉意!

站点统计

  • 建站日期:2014-12-06
  • 最后更新:2016-05-19
  • 运行时间:1906 天
  • 文章数量:46 篇