React Native绝对定位水平中心

Question

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

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

Answer 1

将您想要居中的孩子包裹在视图中并使视图绝对.

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

Answer 2

如果你想将一个元素本身居中,可以使用alignSelf:

logoImg: {
    position: 'absolute',
    alignSelf: 'center',
    bottom: '-5%'
}

这是一个示例(请注意,徽标父级是一个位置为相对的视图)

Answer 3

您可以通过提供左侧属性来设置绝对项目,其中设备的宽度除以2并减去您想要居中宽度的元素的一半.

例如,您的样式可能看起来像这样.

bottom: {
    position: 'absolute',
    left: (Dimensions.get('window').width / 2) - 25,
    top: height*0.93,
}

Answer 4

创建一个全宽View，alignItems: "center"然后在里面插入所需的子项。

import React from "react";
import {View} from "react-native";

export default class AbsoluteComponent extends React.Component {
  render(){
    return(
     <View style={{position: "absolute", left: 0, right: 0, alignItems: "center"}}>
      {this.props.children}
     </View>    
    )
  }
}

您可以bottom: 30为底部对齐的组件添加属性。

Answer 5

<View style={{...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center'}}>
    <Text>CENTERD TEXT</Text>
</View>

并添加这个

import {StyleSheet} from 'react-native';