React Native Text控件动态检测换行的方法

Text控件是React Native最常用的几个控件之一了，因为几乎没有哪个应用不使用文案展示功能的。在展示文案时，我们常常需要限定Text显示区域的宽度，而文本出现超长时，要么选择截断，要么选择换行。当选择换行时，我们要对换行做出一些响应，比如我们需要因此调整所在容器的高度等。本文就演示一下如何动态检测Text控件出现了换行。

单个Text，无嵌套的情况

参照以下步骤：

1. 设置numberOfLines属性，指定最大行数
2. 设置lineHeight样式，指定行高
3. 设置onLayout属性，并在回调函数中判断当前控件的总高度： 1倍的lineHeight为1行，2倍的行高为2行，依次类推。

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

export default class rnText extends Component {

  state = {
    color: 'blue'   //初始蓝色
  }
  
  render() {
    var self = this;
    return (
      <View style={{flex: 1,justifyContent: 'center',alignItems: 'center',}}>
        <Text style={[{color: this.state.color, lineHeight: 25, fontSize: 20,textAlign: 'center', width: 300,}]} 
              numberOfLines={2} 
              onLayout={(e)=>{
                if (e.nativeEvent.layout.height > 25 ) {  //多于一行时改为红色
                  this.setState({
                    color: 'red'
                  })
                }
              }}
        >
          Welcome to React Native! Welcome to React Native! Welcome to React Native!
        </Text>
      </View>
    );
  }
}

即主要借用了onlayout的回调。

onLayout function 

当挂载或者布局变化以后调用，参数为如下的内容：

{nativeEvent: {layout: {x, y, width, height}}}

嵌套Text的情况

当Text中存在子Text控件时，子Text会继承父Text的style和其他属性，但是子Text可以重写从父辈继承来的样式，却不能重写其他属性，如lineHeight, fontSize。

例如：

<Text style={{fontWeight: 'bold', width: 300, color: 'green'}} 
              numberOfLines={2}
              lineHeight={30}
              fontSize={15}
        >
          My name is React Native,
          <Text style={{color: 'red'}}
                lineHeight={50}
                fontSize={25}
          >
            and I'm always open source.
          </Text>
</Text>

显示结果:

所以，在嵌套的状态下，我们只需要在父Text上设置好lineHeight, numberOfLines，并做好onLayout回调即可响应多行布局了。