React Native Text下对齐踩坑

React Native Text下对齐踩坑

实际开发过程中遇到数字+文字的布局方式。并且数字和文字是下对齐，且各自有最大长度限制。

如图 image.png

积分数和优惠券数都需要设置最大长度而文字又必须与数字下对齐

坑1

文字与数字写两个并列的Text，然后给每个Text设置maxWidth属性限制最大宽度，当内容超过最大宽度时末尾自动显示“...”。此方案的难点，两个Text的高度不一致很难做到下对齐

坑2

文字与数字写嵌套的Text，此时会遇到另外一个坑，内嵌的Text设置的maxWidth最大宽度无效，而外层的Text如果设置最大宽度属性的话，当数字超长时文字就被截掉了，这些都不是我们想要的结果，因此我们可以通过截取字符的方式去解决。代码如下：

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>
    );
  }```