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),//後面的數字是一行中的其他地方顯示占居的寬度

    }

    })

注意:如果一行中出現兩個地方都顯示...,并且這兩個地方需要顯示的文字長度不固定，就會出現兩個地方換行的位置不固定，如果能将這兩處地方合并顯示最好

     顯示...可能會出現無效的情況，在開發項目中發現，固定寬度内顯示的字元的個數以及是否是中文、英文或數字等都有關系，一般純英文或數字或英文數字混合都沒有問題，如果中間夾雜了中文，可能會出現沒有顯示...的問題

補充:還有一種方法也可以實作...，就是自己寫算法截取指定長度的字元，由于有中文和特殊符号等符号的原因，截斷時要避免截斷半個字這種情況，需要寫算法根據碼值識别是漢字還是英文或數字等，自己控制截取的長度。截取之後，自己拼接...