需求：

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