1. 程式人生 > >React Native實現Text顯示...的效果

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

    })

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

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

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