web-dev-qa-db-fra.com

React Centre horizontal de positionnement absolu natif

Il semble qu'avec position:absolute utilisé, un élément ne puisse pas être centré avec justifyContent ou alignItems. Une solution de contournement consiste à utiliser marginLeft, mais n'affiche pas la même chose pour tous les périphériques, même en utilisant les dimensions pour détecter la hauteur et la largeur du périphérique.

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

Enveloppez l’enfant que vous voulez centré dans une vue et donnez-lui une vue absolue.

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

Si vous voulez centrer un élément lui-même, vous pouvez utiliser alignSelf :

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

Ceci est un exemple (notez que le logo parent est une vue avec position: relative )

enter image description here

38
David Noreña

Vous pouvez centrer des éléments absolus en fournissant à la propriété de gauche la largeur du périphérique divisée par deux et en soustrayant la moitié de l'élément que vous souhaitez centrer sur la largeur.

Par exemple, votre style pourrait ressembler à ceci.

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

créez une pleine largeur View avec alignItems: "center" puis insérez les enfants souhaités à l'intérieur.

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

vous pouvez ajouter des propriétés comme bottom: 30 pour le composant aligné en bas.

3
masbossun

C'est très simple, vraiment. Utilisez le pourcentage pour les propriétés width et left. Par exemple:

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

Peu importe ce que width est, left est égal à (100% - width)/2

0
user11360198

Vous pouvez essayer le code

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