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',
  },
position react-native flexbox absolute Hasen
quelle
Hat Ihr Element eine statische Breite oder eine dynamische?
Cherniv

Antworten:

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

Geben Sie hier die Bildbeschreibung ein

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 ermittelnmeasure(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