react native Text实现限制行数不显示省略号，尾部直接截断

react native Text实现限制行数，尾部直接截断。直接在下一行加省略号。

效果如图：

         //超过三行就在底部加上省略号

用传统的方法只能实现在尾部加省略号，不过现在新版的RN，ellipsizeMode 属性配上
numberOfLines属性 也能实现这样的效果。不过对于老版的RN就无能为力了。刚好用的老版RN又要实现这样的效果就查资料然后想了想，然后就实现了一个这样的效果，废话不多说，上干货。

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
const devicesWidth=Dimensions.get('window').width;
class MyText extends Component {
   constructor(props) {
        super(props); 
        this.state={
            height:0,
            tag:0,
        };
   }
   textOnLayout(e){
    const layout = e.nativeEvent.layout;
    if(layout.height>60){  //行高是20然后把text的高度设置为60就能保证行数控制在3行了
        this.refs.text.setNativeProps({  
            style:{  
               height:60,
               width:devicesWidth-74,
            }  
        });  
        this.setState({
          tag:1,
        });
    }
   }
   render() {
      return(
             <View >
                <Text 
                   ref="text"
                   style={styles.text}
                   onLayout={this.textOnLayout.bind(this)}
                >
                    {this.props.text}
                </Text>
                {this.state.tag===0?(<View></View>):(<Text style={styles.text1}>......</Text>)}
             </View>     
    );}
}


const styles = StyleSheet.create({
   text: {
        fontSize:15,
        lineHeight:20,
        color: '#323232',
        width:devicesWidth-74,
   },
   text1: {
        fontSize:15,
        lineHeight:20,
        color: '#323232',
   },
});
module.exports=MyText;