同行但字体大小不同的两段文字,如何实现底部对齐?



  • 如图:

    0_1458786524858_屏幕快照 2016-03-24 上午10.10.32.png

    React Native并没有实现Flexbox中的align-items: baseline,这个效果该如何实现呢?

    JSX:

    <View style={styles.numberAndPercent}>
      <Text style={styles.number}>6.80</Text>
      <Text style={styles.percent}>%</Text>
    </View>
    

  • administrators

    手动padding/margin 或者绝对定位吧



  • padding和margin貌似都会影响到其他元素,绝对定位确实可以,不过总感觉怪怪的。



  • 可以试试,让父容器的子view都置底
    flexDirection: 'row',
    alignItems: 'flex-end',



  • @zdk 还有考虑text中的文字居于底部



  • @liu31241
    text置底,文字不就是置底了吗?除非你text和文字大小高度不一致

    <View style={{flexDirection: 'row',alignItems: 'flex-end'}}>
    <Text>6.80</Text>
    <Text>%</Text>
    </View>


登录后回复