React Native Text下對(duì)齊踩坑
實(shí)際開(kāi)發(fā)過(guò)程中遇到數(shù)字+文字的布局方式雳灵。并且數(shù)字和文字是下對(duì)齊绽乔，且各自有最大長(zhǎng)度限制拢肆。
image.png
積分?jǐn)?shù)和優(yōu)惠券數(shù)都需要設(shè)置最大長(zhǎng)度而文字又必須與數(shù)字下對(duì)齊
坑1
文字與數(shù)字寫(xiě)兩個(gè)并列的Text，然后給每個(gè)Text設(shè)置maxWidth屬性限制最大寬度，當(dāng)內(nèi)容超過(guò)最大寬度時(shí)末尾自動(dòng)顯示“...”款慨。此方案的難點(diǎn)，兩個(gè)Text的高度不一致很難做到下對(duì)齊
坑2
文字與數(shù)字寫(xiě)嵌套的Text产雹，此時(shí)會(huì)遇到另外一個(gè)坑诫惭，內(nèi)嵌的Text設(shè)置的maxWidth最大寬度無(wú)效，而外層的Text如果設(shè)置最大寬度屬性的話蔓挖，當(dāng)數(shù)字超長(zhǎng)時(shí)文字就被截掉了夕土，這些都不是我們想要的結(jié)果，因此我們可以通過(guò)截取字符的方式去解決时甚。代碼如下：
render() {
let point = "123456789" // 同理隘弊，任意字符都可以這樣去做
point = point.length > 7 ? point.substr(0,7) + "..." : point
return (
<View style={styles.container}>
<View style={{flexDirection:'row'}}>
<Text style={{fontSize:24, color:'#999999'}}>{point}<Text style={{fontSize:10, color:'#666666'}}>積分</Text></Text>
</View>
</View>
);
}```