Text组件简介

Text组件基本上是任何App都必需要使用的一个组件。一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。内层的组件会继承外层的样式，并且内存组件的样式优先级会比外层高。也就是说如果外层组件定义了文本字体为宋体，而内层组件定义的是微软雅黑，最终显示出来的是微软雅黑的字体。

React Native中的Text组件包含了如下几个常用的属性。

| 属性/方法名称 | 类型 | 说明 |
| --- | --- | --- |
|adjustsFontSizeToFit |bool| 指定字体是否跟随指定样式的限制而自动缩放。|
|allowFontScaling| bool|控制字体是否根据系统的“字体大小”辅助选项来进行缩放|
|minimumFontScale| bool|当adjustsFontSizeToFit开启时，指定最小的缩放比，即不能低于该值，可设定的值为0.01 - 1.0|
|numberOfLines| number|当文本过长的时裁剪文本，包括折叠产生的换行在内，总的行数不会超过这个属性的限制。|
|onLayout| function|当挂载或者布局变化后调用此回调函数。|
|onLongPress| function|当文本被长按以后调用此回调函数。|
|onPress| function|当文本被点击以后调用此回调函数。|
|selectable| function|是否允许用户长按选择文本，以便复制和粘贴。|
|suppressHighlighting| bool|当值为true时，如果文本被按下，则没有任何视觉效果。默认情况下，文本被按下时会有一个灰色的、椭圆形的高光效果。|

Text组件使用示例

下方的示例代码中，我们使用Text组件显示若干行文字，并对显示文字的样式进行了设置。

• 在终端中执行如下命令，创建名称为TextDemo的工程

react-native init TextDemo

• 使用Atom打开TextDemo工程的index.ios.js文件，编写Text组件所使用的样式

const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
    flex: 1,
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

• 在默认的TextDemo组件中，添加Text组件。在下方的代码中，我们对Text组件的样式进行了设置，并且对Text组件进行了嵌套操作。

export default class TextDemo extends Component {
  render() {
    return (
      <Text style={styles.baseText}>
        <Text style={styles.titleText}>
          {'\n Hello 99iOS'}
        </Text>
        <Text numberOfLines={3}>
          {"\n 欢迎访问\n 九九学院\n www.99iOS.com"}
        </Text>
    </Text>
    );
  }
}

• 使用import加载项目所使用的模块，并且注册组件TextDemo成为整个应用的根容器

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
} from 'react-native';

AppRegistry.registerComponent('TextDemo', () => TextDemo);

• 在终端中执行下面的命令运行程序，在iOS模拟器中可以看到显示的文字信息以及文字的样式。

react-native run-ios

注意事项

Text元素在布局上不同于其它组件：在Text内部的元素不再使用Flexbox布局，而是采用文本布局。Text内部的元素不再是一个个‘盒子’，而可能会在行末进行折叠。所以如果对Text组件style设置flexDirection: 'column'是无效的。

为了验证Text组件的布局特性，下面的测试代码中，Text组件里面的所有子Text组件都会按顺序排列，看上去就像一个Text组件。

export default class TextDemo extends Component {
  render() {
    return (
      <Text>
      <Text style={styles.titleText}>
       {'\n Hello'}
      </Text>
      <Text style={styles.titleText}>
       {' 99iOS'}
      </Text>
      </Text>
    );
  }
}

另外，我们把所有子Text组件装入一个View组件中，此时每一个Text组件都是一个“盒子”。

export default class TextDemo extends Component {
  render() {
    return (
      <View>
      <Text style={styles.titleText}>
       {'\n Hello'}
      </Text>
      <Text style={styles.titleText}>
       {' 99iOS'}
      </Text>
      </View>
    );
  }
}

---