React Native 绝对定位水平中心 [英] React Native absolute positioning horizontal centre

问题描述

似乎在使用 position:absolute 时，元素不能使用 justifyContent 或 alignItems 居中.有一种使用 marginLeft 的解决方法，但即使使用尺寸来检测设备的高度和宽度，也不会对所有设备显示相同的内容.

It seems that with position:absolute in use an element cannot be centred using justifyContent or alignItems. There's a workaround to use marginLeft but does not display the same for all devices even using dimensions to detect height and width of device.

  bottom: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    top: height*0.93,
    marginLeft: width*0.18,
  },
  bottomNav: {
    flexDirection: 'row',
  },

推荐答案

将您想要的子级包裹在一个视图中，并使该视图成为绝对视图.

Wrap the child you want centered in a View and make the View absolute.

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
  <Text>Centered text</Text>
</View>

这篇关于React Native 绝对定位水平中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！