React Native组件之Text

一、简介

一个用于文本显示的React组件，并且支持嵌套、样式以及触摸处理。

二、Text

在下面的例子里，嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体，不过标题上还附加了它自己额外的样式。标题和文本会在顶部依次堆叠，并且被代码中内嵌的换行符分隔开。

 

renderText: function() {
  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={this.onPressTitle}>
        {this.state.titleText + '\n\n'}
      </Text>
      <Text numberOfLines={5}>
        {this.state.bodyText}
      </Text>
    </Text>
  );
},
...
var styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
};

 

 

三、Text的API

1. adjustsFontSizeToFit   Boolean   指定字体是否随着给定样式的限制而自动缩放

2. allowFontScaling   Boolean  控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。

3. minimumFontScale  Boolean  当adjustsFontSizeToFit开启时，指定最小的缩放比（即不能低于这个值）。可设定的值为0.01 - 1.0

4. numberOfLines   Number   用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。

5. onLayout    Function   当挂载或者布局变化以后调用，参数为如下的内容：{nativeEvent: {layout: {x, y, width, height}}}
   

6. onLongPress   Function   当文本被长按以后调用此回调函数。

7. onPress  Function   当文本被点击以后调用此回调函数。

8. selectable   决定用户是否可以长按选择文本，以便复制和粘贴。

9. style   自定义样式

• • color
  • fontFamily
  • fontSize
  • fontStyle
  • fontWeight ->大多数字体都支持normal和bold的值，并非所有字体都支持所有的数值。若不支持贼选择最接近的值
  • lineHeight
  • textAlign
  • textDecorationLine
  • textShadowColor
  • textShadowOffset
  • textShadowRadius

 四、容器

<Text>元素在布局上不同于其他组件：在Text内部的元素不再使用flexbox布局，而采用文本布局。这意味着Text内部的元素不再是一个个矩形，而可能会在行末折叠。

<Text>
  <Text>First part and </Text>
  <Text>second part</Text>
</Text>
// Text container: all the text flows as if it was one
// |First part |
// |and second |
// |part       |

<View>
  <Text>First part and </Text>
  <Text>second part</Text>
</View>
// View container: each text is its own block
// |First part |
// |and        |
// |second part|

 

五、样式继承限制

在web上，要想指定整个文档的字体和大小，我们只需要写：

 

/* 这段代码是CSS, *不是*React Native */
html {
  font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  color: #141823;
}

 

当浏览器尝试渲染一个文本节点的时候，它会在树中一路向上查询，直到根节点，来找到一个具备font-size属性的元素。这个系统一个不好的地方在于任何节点都可能会有font-size属性，包括<div>标签。这个设计为了方便而设计，但实际上语义上并不太正确。

 

在RN中，我们把这个问题设计的更加严谨：你必须把你的文本节点放在<Text>组件内，你不能直接在<View>下放置一段文本。

 

// 错误的做法：会导致一个错误。<View>下不能直接放一段文本。
<View>
  一些文本
</View>

// 正确的做法
<View>
  <Text>
    一些文本
  </Text>
</View>

 

 

React Native实际上还是有一部分样式继承的实现，不过仅限于文本标签的子树。在下面的代码里，第二部分会在加粗的同时又显示为红色：

<Text style={{fontWeight: 'bold'}}>
  I am bold
  <Text style={{color: 'red'}}>
    and red
  </Text>
</Text>