react native实现可展开Text控件

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

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

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

react native实现可展开Text控件

猜你在找的React相关文章