React Native абсолютное позиционирование по горизонтали по центру

93

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

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

— Hasen
источник

У вашего элемента статическая ширина или динамическая?

— Иван Черных

252

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

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

— Стивен Хорват
источник

28

Очень полезно. Там хороший ярлык для тех Params стиля висит прочь StyleSheetобъекта: ...StyleSheet.absoluteFillObject. см github.com/facebook/react-native/blob/master/Libraries/...

— WKW

2

Разве это не Viewзанимает ВСЕ кликабельное пространство на экране? Например, если бы под этим абсолютно позиционировался компонент View, я бы не смог регистрировать клики по нему.

— James111

10

@ James111 Похоже, вы можете добавить, pointerEvents='box-none'чтобы передать штрихи через представление: github.com/facebook/react-native/issues/12360

— Стивен Хорват

Этот метод восстанавливает все изображение, если текст имеет цвет фона: /

— DevMultiTech

@codewise, да, есть новый способ сделать это, посмотрите мой ответ

— Дэвид

73

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

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

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

— Дэвид Норенья
источник

1

alignSelf у меня не работал (вообще-то ничего не делал). Не могли бы вы добавить в код немного больше контекста?

— Джонни Кер

1

Родитель должен отображаться: 'flex' @ wilc0

— Трэвис Делли

12

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

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

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

— Кори
источник

это работает, только если вы заранее знаете ширину элементов

— Адамски

1

Если вы не знаете, что у элемента нет известной ширины, вы можете использовать onLayout для получения ширины элемента

measure(layout) {      const { width } = layout;      this.setState({ width: width }) } ... <View     onLayout={(event) => { this.measure(event.nativeEvent.layout) }} ...

— Кори

6

создайте полную ширину, 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для компонента с выравниванием по низу.

— Masbossun
источник

2

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

И добавьте это

import {StyleSheet} from 'react-native';

— Махди Баширпур
источник

Короткие ответы, состоящие только из кода, часто не одобряются в Stack Overflow. Чтобы избежать отметки «низкое качество», рассмотрите возможность добавления пояснительного текста.

— Адриан Моул

1

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

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

— Эрис Мабу
источник

Ха-ха. Это работает для меня, однако нам нужно добавить `style = {{alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}`

— babie

1

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

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

Что бы ни было width, leftравно(100% - width)/2

— user11360198
источник