Реагировать Самостоятельное абсолютное позиционирование горизонтального центра

Кажется, что с position:absolute в использовании элемент не может быть центрирован с использованием justifyContent или alignItems. Существует marginLeft решение для использования marginLeft но не отображается одинаково для всех устройств, даже используя размеры для определения высоты и ширины устройства.

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

Ответ 1

Оберните ребенка, которого хотите сосредоточить в представлении, и сделайте представление абсолютным.

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

Ответ 2

Если вы хотите центрировать один элемент, вы можете использовать alignSelf:

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

Это пример (обратите внимание, что родительский логотип - это вид с позицией: относительный)

Ответ 3

Вы можете центрировать абсолютные элементы, предоставляя левому свойству ширину устройства, разделенную на две части, и вычитание половины элемента, который вы хотите получить в центре.

Например, ваш стиль может выглядеть примерно так.

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

Ответ 4

Это очень просто на самом деле. Используйте процент для width и left свойств. Например:

logo : {
  position: 'absolute',
  top : 50,
  left: '30%',
  zIndex: 1,
  width: '40%',
  height: 150,
}

Какой бы ни была width, left равен (100% - width)/2

Ответ 5

создайте полноразмерное View с помощью alignItems: "center" затем вставьте нужные дочерние 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 для компонента, выровненного снизу.

Ответ 6

Вы можете попробовать код

<View
    style={{
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <View
      style={{
        position: 'absolute',
        margin: 'auto',
        width: 50,
        height: 50
      }}
    />
  </View>