React Native实现Text显示...的效果

大家好，这里我给大家讲一些React native中的Text控件显示省略号的实现方法。
    项目开发中文字的显示是必不可少的，比如产品简介或描述，产品详情等。往往会遇到文字过长的情况，一般怎么处理这些问题呢？
大多数软件都是将界面布局中显示不下的内容显示为...,也就是通过省略号这种方式告诉用户，没有显示完，后面还有内容，一般这种可以
点击进到详情界面看到更全面的信息，好了，废话少说，直接说如何实现Text显示...,直接上示例代码：


    <Text style = {styles.widthCal} numberOfLines={1}>这里是需要显示的很长的文字</Text>


    其中widthCal为需要显示的文字的宽度的样式.如下:
    const styles = StyleSheet.create({
    widthSome:{
        width:screenWidth - (13+42+5+45+11+18+10),
    }
    })
    screenWidth是获取的屏幕的宽度,获取方法如:
    var screenWidth =Dimensions.get('window').width;


解析:Text控件的使用很简单，默认使用方法如:<Text>需要需要显示的文字</Text>,如果这样写是不会显示...的。显示...关键有两点：
     1)给需要显示...的文字设置指定的宽度，如示例代码中的样式中的styles.widthCal
     2)设置属性numberOfLines={1}


    const styles = StyleSheet.create({
    widthSome:{
        width:screenWidth - (13+42+5+45+11+18+10),//后面的数字是一行中的其他地方显示占居的宽度
    }

    })

注意:如果一行中出现两个地方都显示...,并且这两个地方需要显示的文字长度不固定，就会出现两个地方换行的位置不固定，如果能将这两处地方合并显示最好

     显示...可能会出现无效的情况，在开发项目中发现，固定宽度内显示的字符的个数以及是否是中文、英文或数字等都有关系，一般纯英文或数字或英文数字混合都没有问题，如果中间夹杂了中文，可能会出现没有显示...的问题

补充:还有一种方法也可以实现...，就是自己写算法截取指定长度的字符，由于有中文和特殊符号等符号的原因，截断时要避免截断半个字这种情况，需要写算法根据码值识别是汉字还是英文或数字等，自己控制截取的长度。截取之后，自己拼接...