react native实现可展开Text控件

转载:http://blog.csdn.net/jan8705_/article/details/52279533

原理：组件初始化时不设置Text控件的numberOfLines属性，测量一下组件高度（最大高度），然后在设置numberOfLines属性，再次测量一下组件高度（最小高度），若最大高度大与最小高度，表示需要显示“展开”。

[plain] view plain copy

1. /*eslintnew-cap:["error",{"capIsNew":false}]*/
3. importReact,{
4. Component,
5. PropTypes,
6. }from'react';
8. import{View,Image,StyleSheet,Animated,Text}from'react-native';
9. exportdefaultclassCollapsibleTextextendsComponent{
10. staticpropTypes={
11. style:Text.propTypes.style,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> expandTextStyle:Text.propTypes.style,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> numberOfLines:PropTypes.number
12. }
13. constructor(props){
14. super(props);
15. this.state={
16. /**文本是否展开*/
17. expanded:true,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> numberOfLines:null,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> /**展开收起文字是否处于显示状态*/
18. showExpandText:false,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> expandText:'展开',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> /**是否处于测量阶段*/
19. measureFlag:true
20. this.numberOfLines=props.numberOfLines;
21. /**文本是否需要展开收起功能：（实际文字内容是否超出numberOfLines限制）*/
22. this.needExpand=true;
23. this.measureFlag=true;
24. }
25. _onTextLayout(event){
26. if(this.measureFlag){
27. if(this.state.expanded){
28. this.maxHeight=event.nativeEvent.layout.height;
29. this.setState({expanded:false,numberOfLines:this.numberOfLines});
30. }else{
31. this.mixHeight=event.nativeEvent.layout.height;
32. if(this.mixHeight==this.maxHeight){
33. this.needExpand=false;
34. this.needExpand=true;
35. this.setState({showExpandText:true})
36. this.measureFlag=false;
37. _onPressExpand(){
38. if(!this.state.expanded){
39. this.setState({numberOfLines:null,expandText:'收起',expanded:true})
40. }else{
41. this.setState({numberOfLines:this.numberOfLines,expandText:'展开',expanded:false})
42. render(){
43. const{numberOfLines,onLayout,expandTextStyle,...rest}=this.props;
44. letexpandText=this.state.showExpandText?(
45. <Text
46. style={[this.props.style,styles.expandText,expandTextStyle]}
47. onPress={this._onPressExpand.bind(this)}>
48. {this.state.expandText}</Text>
49. ):null;
50. return(
51. <View>
52. <Text
53. numberOfLines={this.state.numberOfLines}
54. onLayout={this._onTextLayout.bind(this)}
55. {...rest}
56. >
57. {this.props.children}
58. </Text>
59. {expandText}
60. </View>
61. );
62. conststyles=StyleSheet.create({
63. expandText:{
64. color:'blue',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> marginTop:0
65. });