wake-up-neo.com

React Native absolute Positionierung horizontaler Mittelpunkt

Es scheint, dass mit position:absolute In Verwendung kann ein Element nicht mit justifyContent oder alignItems zentriert werden. Es gibt eine Problemumgehung für die Verwendung von marginLeft, die jedoch nicht für alle Geräte angezeigt wird, selbst wenn Abmessungen zum Ermitteln der 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',
  },
positionreact-nativeflexboxabsolute
66
Hasen

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>
158
Stephen Horvath

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 ist: relativ )

enter image description here

38
David Noreña

Sie können absolute Elemente zentrieren, indem Sie für die Eigenschaft left die Breite des Geräts durch zwei dividieren und die Hälfte des Elements abziehen, dessen Breite Sie zentrieren möchten.

Ihr Stil könnte beispielsweise so aussehen.

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

erstelle ein View mit voller Breite mit alignItems: "center" und füge dann die gewünschten Kinder ein.

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: 30 für unten ausgerichtete Komponenten hinzufügen.

3
masbossun

Es ist wirklich sehr einfach. Verwenden Sie den Prozentsatz für die Eigenschaften width und left. Zum Beispiel:

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

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

0
user11360198

Sie können den Code ausprobieren

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