react-native Text 文字垂直居中

请注意label Text组件文本的容器是否有padding,这会误导以为没有居中 

一般来说 rn中的Text都是需要父容器的,父容器可以使Text组件垂直、水平居中,但是不能使Text的文本垂直居中,我们还需要给Text组件设置固定行高lineHeight:30 然后设置height: 30 即可垂直居中(请注意,flex对Text组件的文本内容无效)

import {Platform} from 'react-native';
 
label: {
    fontSize: OASize(11),
    color: OAColor.descText,
    height: OASize(20),
    textAlign: 'center',
    textAlignVertical: 'center',
    ...Platform.select({
      ios: { lineHeight: OASize(20) },
      android: {}
    })
}

猜你喜欢

转载自blog.csdn.net/hzxOnlineOk/article/details/107855092