Reagieren Sie auf die horizontale Mitte der nativen absoluten Positionierung

90

Es scheint, dass bei position:absoluteVerwendung ein Element nicht mit justifyContentoder zentriert werden kann alignItems. Es gibt eine Problemumgehung, die marginLeftjedoch nicht für alle Geräte gleich angezeigt wird, selbst wenn Abmessungen zum Erkennen von Höhe und Breite des Geräts verwendet werden.

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

— Hasen
quelle

Hat Ihr Element eine statische Breite oder eine dynamische?

— Cherniv

244

Wickeln Sie das gewünschte Kind in eine Ansicht ein und machen Sie die Ansicht absolut.

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

— Stephen Horvath
quelle

27

Sehr hilfreich. Es gibt eine nette Verknüpfung für die Stilparameter, die am StyleSheetObjekt hängen : ...StyleSheet.absoluteFillObject. siehe github.com/facebook/react-native/blob/master/Libraries/…

— wkw

2

Macht dies nicht den Viewgesamten anklickbaren Platz auf dem Bildschirm aus? Wenn ich beispielsweise eine Komponente darunter hätte, die absolut positioniert ist View, könnte ich keine Klicks darauf registrieren.

— James111

9

@ James111 Es sieht so aus, als könnten Sie hinzufügen pointerEvents='box-none', um die Berührungen durch die Ansicht zu leiten : github.com/facebook/react-native/issues/12360

— Stephen Horvath

Diese Methode stellt das gesamte Bild wieder her, wenn der Text eine Hintergrundfarbe hat: /

— DevMultiTech

@codewise yep, es gibt einen neuen Weg, es zu tun, überprüfen Sie meine Antwort

— David Noreña

68

Wenn Sie ein Element selbst zentrieren möchten, können Sie alignSelf verwenden :

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

Dies ist ein Beispiel (Beachten Sie, dass das übergeordnete Logo eine Ansicht mit der Position "relativ" ist. )

— David Noreña
quelle

1

alignSelf hat bei mir nicht funktioniert (es hat tatsächlich nichts getan). Könnten Sie dem Code etwas mehr Kontext hinzufügen?

— Johnny Kehr

1

Das übergeordnete Element muss angezeigt werden: 'flex' @ wilc0

— Travis Delly

12

Sie können absolute Elemente zentrieren, indem Sie der linken Eigenschaft die Breite des Geräts durch zwei teilen und die Hälfte des Elements abziehen, das Sie zentrieren möchten.

Zum Beispiel könnte Ihr Stil ungefähr so aussehen.

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

— Corey
quelle

Dies funktioniert nur, wenn Sie die Breite der Elemente im Voraus kennen

— Adamski

1

Wenn Sie nicht wissen, dass das Element keine bekannte Breite hat, können Sie onLayout verwenden, um die Breite des Elements zu ermitteln

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

— Corey

4

eine volle Breite erstellen Viewmit alignItems: "center"dann gewünschten Kindern innerhalb Einsatzes.

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

Sie können Eigenschaften wie bottom: 30für unten ausgerichtete Komponenten hinzufügen .

— Masbossun
quelle

1

Sie können den Code ausprobieren

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

— Eris Mabu
quelle

Haha. Dies funktioniert für mich. Wir müssen jedoch `style = {{alignItems: 'center', adjustContent: 'center', flexDirection: 'row'}}`

— hinzufügen

1

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

Und füge das hinzu

import {StyleSheet} from 'react-native';

— Bashirpour
quelle

Kurze Nur-Code-Antworten werden beim Stapelüberlauf häufig verpönt. Um zu vermeiden, dass Sie als "minderwertig" gekennzeichnet werden, sollten Sie einen erläuternden Text hinzufügen.

— Adrian Mole

0

Es ist wirklich sehr einfach. Verwenden Sie den Prozentsatz für widthund leftEigenschaften. Beispielsweise:

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

Was auch immer widthist, ist leftgleich(100% - width)/2

— user11360198
quelle