有时,在App中显示一段文本时,会需要先显示部分内容,用户如果对余下内容感兴趣,那么点击一个‘显示更多’的按钮,然后再显示余下内容,这个非常普通的需求在React Native中并没有官方的支持,Text组件中有numberOfLines属性,可以通过这个属性来设置显示的行数,但是对于一些动态内容,我们并不知道这些动态文本会在各个分辨率的手机上占几行,所以就不好判断是否需要‘显示更多’按钮。通过文本长度判断可以解决一部分人的需求,但是这个并不准确。

好在React Native 提供了measure函数,一开始将numberOfLines设置成0,那么可以在measure中获取到Text组件显示全部内容时的高度,然后可以判断这个高度是不是大于需要显示行数所占的高度,比方说我需要显示4行,每行高度为25,如果measure中获取到的高度大于4*25,说明行数是大于4行的,那么就将numberOfLines设置成4,并且显示‘显示更多’按钮。

  measureHeader() {
      this.refs.description.measure((ox, oy, width, height) => {
        if (height > 100) {
          this.setState({
            numberOfLines: 4
          });
        }
      });
   },

Github上有个关于这个功能的讨论,有兴趣的可以看下。

UPDATE
后来FB几个成员倒腾了个第三方的module,react-native-read-more-text,思路基本和上面一致,但是react-native-read-more-text用了Promise和异步机制,省去了不必要的render,效率高出很多。