React Native pozycjonowanie bezwzględne środek poziomy

92

Wydaje się, że position:absolutew użyciu element nie może być wyśrodkowany za pomocą justifyContentlub alignItems. Istnieje obejście do użycia, marginLeftale nie wyświetla się tak samo dla wszystkich urządzeń, nawet przy użyciu wymiarów do wykrywania wysokości i szerokości urządzenia.

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

— Hasen
źródło

Czy Twój element ma szerokość statyczną czy dynamiczną?

— Ivan Chernykh

251

Owiń dziecko, które chcesz wyśrodkować w widoku i uczyń widok absolutnym.

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

— Stephen Horvath
źródło

28

Bardzo przydatne. Jest to skrót miły dla tych params stylu wiszące off StyleSheetobiektu ...StyleSheet.absoluteFillObject. patrz github.com/facebook/react-native/blob/master/Libraries/…

— wkw

2

Czy to nie sprawia, że Viewzajmuje CAŁĄ klikalną przestrzeń na ekranie? Np. Gdybym miał komponent pod tym absolutnie pozycjonowany View, nie byłbym w stanie zarejestrować kliknięć na nim.

— James111,

10

@ James111 Wygląda na to, że możesz dodać, pointerEvents='box-none'aby przejść przez widok: github.com/facebook/react-native/issues/12360

— Stephen Horvath

Ta metoda odzyskuje cały obraz, jeśli tekst ma kolor tła: /

— DevMultiTech

@codewise tak, jest nowy sposób na zrobienie tego, sprawdź moją odpowiedź

— David Noreña

73

Jeśli chcesz wyśrodkować jeden element, możesz użyć alignSelf :

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

To jest przykład (zauważ, że rodzic logo to widok z pozycją: względna )

— David Noreña
źródło

1

alignSelf nie działało dla mnie (w rzeczywistości nic nie dało). Czy mógłbyś dodać trochę więcej kontekstu do kodu?

— johnny kehr

1

Potrzebujesz, aby rodzic był wyświetlany: „flex” @ wilc0

— Travis Delly

12

Możesz wyśrodkować elementy bezwzględne, podając lewą właściwość szerokość urządzenia podzieloną przez dwa i odejmując połowę szerokości elementu, który chcesz wyśrodkować.

Na przykład Twój styl może wyglądać mniej więcej tak.

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

— Corey
źródło

działa to tylko wtedy, gdy znasz wcześniej szerokość elementów

— Adamski

1

Jeśli nie wiesz, że element nie ma znanej szerokości, możesz użyć onLayout, aby uzyskać szerokość elementów

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

— Corey

6

utwórz pełną szerokość, Viewa alignItems: "center"następnie włóż pożądane dzieci do środka.

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

możesz dodać właściwości, takie jak bottom: 30dla komponentu wyrównanego do dołu.

— masbossun
źródło

2

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

I dodaj to

import {StyleSheet} from 'react-native';

— Mahdi Bashirpour
źródło

Krótkie, zawierające tylko kod odpowiedzi są często źle widziane na Stack Overflow. Aby uniknąć oznaczenia jako „niskiej jakości”, rozważ dodanie tekstu wyjaśniającego.

— Adrian Mole

1

Możesz wypróbować kod

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

— Eris Mabu
źródło

Ha ha. To działa dla mnie, jednak musimy dodać `style = {{alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}`

— babie

1

To naprawdę bardzo proste. Użyj wartości procentowej dla widthi leftwłaściwości. Na przykład:

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

Cokolwiek widthjest, jest leftrówne(100% - width)/2

— user11360198
źródło