reactnative中实现多行文本显示展开收起

需求：

近来在 react-native 项目中产品想要实现，文本多于两行，显示展开的按钮，并支持展开，收起。

思考

拿到需求分析下，如果我能知道两行文本能展示几个字，然后拿总字数和这个比较就可以知道是多于两行还是不多于两行。但仔细一项发现不对，首先手机端屏幕宽度等不固定，所以两行文本具体能展示多少字，而且中英文占的宽度也不一样，所以这条路走不通。

做法

再翻看 react-native 的文档，发现了 onLayout 这个方法

想想是否可以使用这个来实现这个需求呢，于是尝试下出来底下的代码

 constructor(props) {super(props);
    this.state = {
      numLines: null,
      maxHeight: 0,
      showOpenDetail: false
    };
  }
  render(){
    ...
    <Text
          style={[{
            fontSize: 14,
            lineHeight: 22,
          }]}
          allowFontScaling={false}
          numberOfLines={this.state.numLines}
          onLayout={(event) => {const height = Math.floor(event.nativeEvent.layout.height || 0);
            // 第一次测量 view 的最大高度
            if (this.state.maxHeight === 0) {
              this.setState({
                maxHeight: height,
                numLines: 2
              });
              // 第二次当测量的最大高度 > 设置行数后的高度的时候，则需要展开按钮。} else if (this.state.maxHeight > height) {if (!this.state.showOpenDetail) {
                this.setState({showOpenDetail: true,});
              }
            }
          }}
        >
          第二次当测量的最大高度 > 设置行数后的高度的时候，需要换行第二次当测量的最大高度 > 设置行数后的高度的时候，需要换行第二次当测量的最大高度 > 设置行数后的高度的时候，需要换行
        </Text>
        {this.state.showOpenDetail 
        && (<Text> 展开 </Text>)}
        ...
  }

总结

第一次不设置行数获取到真正展示那么多文本的时候需要的高度，获取到高度后设置为限制行数 2，这样会触发一次 onLayout，这次获取到 Text 的高度，如果此时 Text 高度小于展示全文本的高度则标识两行展示不全文本则显示展开按钮

ps：这里需注意获取高度后要取整，小心小数点影响你的效果, 功能实现了，唯一的就是会看到文本自动展开收起的效果，不知道大家有啥好的方法不