一.Text组件介绍
在 React Native 用于显示文本的组件就是 Text，专门用来显示基本的文本信息，处理基本的显示布局外，还可以进行嵌套显示，设置样式，事件处理（如：点击事件）
二.Text组件常用的属性和方法
字体相关样式
fontSize fontFamily fontStyle(normal italic) fontWeight(100 - 900 normal bold)
textAlign textDecorationLine(none underline line-through)
adjustsFontSizeToFit：默认值为false,为true时，指定字体随着给定样式的限制而自动缩放
minimumFontScale：当adjustsFontSizeToFit开启时，指定最小的缩放比（即不能低于这个值）。可设定的值为0.01 - 1.0
allowFontScaling：默认值为true.为false时，控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放
suppressHighlighting：默认情况下，文本被按下时会有一个灰色的、椭圆形的高光，当为true时，如果文本被按下，则没有任何视觉效果。
onLongPress：当文本被长按以后调用此回调函数（参考onPress）
onLayout：当挂载或者布局变化以后调用（参数为：{nativeEvent: {layout: {x, y, width, height}}}）(参考onPress)
onPress：当文本发生点击的时候调用该方法
selectable：布尔类型的属性，默认值是false。为true时，组件中的文字可以被选择并复制到手机系统的剪贴版中
numberOfLines 文本行数限制，添加后超过限制行数文本会在末尾默认以...的形式省略。
ellipsizeMode 设置文本缩略格式，配合numberOfLines使用，values：
head：在前面...省略
middle：在中间...省略
tail：在末尾...省略（默认值）
clip：在末尾切割，直接切割字符无省略符
阴影效果
textShadowOffset（width: number, height: number）：设置阴影效果
textShadowRadius 阴影效果圆角（值越大阴影越模糊）
textShadowColor 阴影效果颜色
三.Text组件的嵌套
在 React Native 中是没有样式继承这种说法的，但对于 Text 元素里边的 Text 元素，其实是可以继承的.
文字控制类的属性也是多继承的，和 CSS 是一样的,而且会取与自己最近的属性归自己所用，也就是说属性可覆盖
四.Text组件的应用
1 字符串居中（水平与垂直都居中）显示在一个方形区域
错误的做法是：导致水平居中，但是垂直不局中，（justiyContent无效）
正确的做法是：在Text外加一个包围的View,把对text的样式移动到view组件里
五.Text组件在两个平台上的不同表现
当开发者需要实现带边框的Text组件时，建议统一使用（View组件包裹Text组件的方法）（否则android平台边框不生效）这种方法
1.只指定fontsize,不指定height
都正常
2只指定height,不指定fontsize
fontsize都为13
3.height== fontsize
ios 略微遮盖
and：遮盖明显
4.height大于fontSize
ios:height=fontsize*1.2 . 1类似
and:height=fontsize*1.35 1类似
边框 ios生效 and不生效 viwe包text 加borderwidth
网友评论