react native实现可展开Text控件

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

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

[plain]view plaincopy 
   
 /*eslintnew-cap:["error",{"capIsNew":false}]*/@H_502_33@ 
  
 @H_502_33@ 
  
 importReact,{@H_502_33@ 
  
 Component,@H_502_33@ 
  
 PropTypes,@H_502_33@ 
  
 }from'react';@H_502_33@ 
  
 @H_502_33@ 
  
 import{View,Image,StyleSheet,Animated,Text}from'react-native';@H_502_33@ 
  
 exportdefaultclassCollapsibleTextextendsComponent{@H_502_33@ 
  
 staticpropTypes={@H_502_33@ 
  
 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@H_502_33@ 
  
 }@H_502_33@ 
  
 constructor(props){@H_502_33@ 
  
 super(props);@H_502_33@ 
  
 this.state={@H_502_33@ 
  
 /**文本是否展开*/@H_502_33@ 
  
 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"> /**展开收起文字是否处于显示状态*/@H_502_33@ 
  
 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"> /**是否处于测量阶段*/@H_502_33@ 
  
 measureFlag:true@H_502_33@ 
  
 this.numberOfLines=props.numberOfLines;@H_502_33@ 
  
 /**文本是否需要展开收起功能：（实际文字内容是否超出numberOfLines限制）*/@H_502_33@ 
  
 this.needExpand=true;@H_502_33@ 
  
 this.measureFlag=true;@H_502_33@ 
  
 }@H_502_33@ 
  
 _onTextLayout(event){@H_502_33@ 
  
 if(this.measureFlag){@H_502_33@ 
  
 if(this.state.expanded){@H_502_33@ 
  
 this.maxHeight=event.nativeEvent.layout.height;@H_502_33@ 
  
 this.setState({expanded:false,numberOfLines:this.numberOfLines});@H_502_33@ 
  
 }else{@H_502_33@ 
  
 this.mixHeight=event.nativeEvent.layout.height;@H_502_33@ 
  
 if(this.mixHeight==this.maxHeight){@H_502_33@ 
  
 this.needExpand=false;@H_502_33@ 
  
 this.needExpand=true;@H_502_33@ 
  
 this.setState({showExpandText:true})@H_502_33@ 
  
 this.measureFlag=false;@H_502_33@ 
  
 _onPressExpand(){@H_502_33@ 
  
 if(!this.state.expanded){@H_502_33@ 
  
 this.setState({numberOfLines:null,expandText:'收起',expanded:true})@H_502_33@ 
  
 }else{@H_502_33@ 
  
 this.setState({numberOfLines:this.numberOfLines,expandText:'展开',expanded:false})@H_502_33@ 
  
 render(){@H_502_33@ 
  
 const{numberOfLines,onLayout,expandTextStyle,...rest}=this.props;@H_502_33@ 
  
 letexpandText=this.state.showExpandText?(@H_502_33@ 
  
 <Text@H_502_33@ 
  
 style={[this.props.style,styles.expandText,expandTextStyle]}@H_502_33@ 
  
 onPress={this._onPressExpand.bind(this)}>@H_502_33@ 
  
 {this.state.expandText}</Text>@H_502_33@ 
  
 ):null;@H_502_33@ 
  
 return(@H_502_33@ 
  
 <View>@H_502_33@ 
  
 <Text@H_502_33@ 
  
 numberOfLines={this.state.numberOfLines}@H_502_33@ 
  
 onLayout={this._onTextLayout.bind(this)}@H_502_33@ 
  
 {...rest}@H_502_33@ 
  
 >@H_502_33@ 
  
 {this.props.children}@H_502_33@ 
  
 </Text>@H_502_33@ 
  
 {expandText}@H_502_33@ 
  
 </View>@H_502_33@ 
  
 );@H_502_33@ 
  
 conststyles=StyleSheet.create({@H_502_33@ 
  
 expandText:{@H_502_33@ 
  
 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@H_502_33@ 
  
 });@H_502_33@

原文链接：https://www.f2er.com/react/305084.html

react native实现可展开Text控件

猜你在找的React相关文章