native react 电子书_React-Native Text组件的使用

一.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