react native实现可展开Text控件

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

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

[plain] view plain copy

1. /* eslint new-cap: ["error", { "capIsNew": false }] */  
2.   
3. import React, {  
4.   Component,  
5.   PropTypes,  
6. } from 'react';  
7.   
8. import {View, Image, StyleSheet, Animated, Text} from 'react-native';  
9. export default class CollapsibleText extends Component {  
10.   static propTypes = {  
11.     style: Text.propTypes.style,  
12.     expandTextStyle:Text.propTypes.style,  
13.     numberOfLines: PropTypes.number  
14.   }  
15.   constructor(props){  
16.     super(props);  
17.     this.state = {  
18.       /** 文本是否展开 */  
19.       expanded:true,  
20.       numberOfLines:null,  
21.       /** 展开收起文字是否处于显示状态 */  
22.       showExpandText:false,  
23.       expandText:'展开',  
24.       /** 是否处于测量阶段 */  
25.       measureFlag:true  
26.     }  
27.     this.numberOfLines = props.numberOfLines;  
28.     /** 文本是否需要展开收起功能：（实际文字内容是否超出numberOfLines限制） */  
29.     this.needExpand = true;  
30.     this.measureFlag = true;  
31.   }  
32.   
33.   
34.   _onTextLayout(event){  
35.     if(this.measureFlag){  
36.       if(this.state.expanded){  
37.         this.maxHeight = event.nativeEvent.layout.height;  
38.         this.setState({expanded:false,numberOfLines:this.numberOfLines});  
39.       }else{  
40.         this.mixHeight = event.nativeEvent.layout.height;  
41.         if(this.mixHeight == this.maxHeight){  
42.           this.needExpand = false;  
43.         }else{  
44.           this.needExpand = true;  
45.           this.setState({showExpandText:true})  
46.         }  
47.         this.measureFlag = false;  
48.       }  
49.     }  
50.   
51.   }  
52.   
53.   _onPressExpand(){  
54.     if(!this.state.expanded){  
55.       this.setState({numberOfLines:null,expandText:'收起',expanded:true})  
56.     }else{  
57.       this.setState({numberOfLines:this.numberOfLines,expandText:'展开',expanded:false})  
58.     }  
59.   }  
60.   
61.   render() {  
62.     const { numberOfLines, onLayout, expandTextStyle, ...rest } = this.props;  
63.     let expandText = this.state.showExpandText?(  
64.         <Text  
65.           style={[this.props.style,styles.expandText,expandTextStyle]}  
66.           onPress={this._onPressExpand.bind(this)}>  
67.           {this.state.expandText}</Text>  
68.       ) : null;  
69.     return (  
70.       <View>  
71.         <Text  
72.           numberOfLines={this.state.numberOfLines}  
73.           onLayout={this._onTextLayout.bind(this)}  
74.           {...rest}  
75.           >  
76.           {this.props.children}  
77.         </Text>  
78.         {expandText}  
79.       </View>  
80.     );  
81.   }  
82. }  
83.   
84. const styles = StyleSheet.create({  
85.   expandText: {  
86.     color:'blue',  
87.     marginTop:0  
88.   }  
89.   
90.   
91. });