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

92

Здається, що при position:absoluteвикористанні елемент не може бути відцентрований за допомогою justifyContentабо alignItems. Існує обхідний спосіб використання, marginLeftале він не відображається однаково для всіх пристроїв, навіть використовуючи розміри для виявлення висоти та ширини пристрою.

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

— Хасен
джерело

Чи має ваш елемент статичну ширину чи динаміку?

— Іван Черних

249

Оберніть дитину, яку ви хочете, зосереджено у поданні та зробіть вигляд абсолютним.

<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%'
}

Це приклад (Зверніть увагу, що батьківський логотип - це подання з позицією: relative )

— Девід Нореня
джерело

1

alignSelf не працював у мене (насправді нічого не робив). Не могли б ви додати трохи більше контексту до коду?

— Johnny Kehr,

1

Вам потрібно, щоб батько відображався: 'flex' @ wilc0

— Тревіс Деллі

12

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

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

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) }} ...

— Кори

5

створити на всю ширину, 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

— користувач11360198
джерело