Réagir au centre horizontal de positionnement absolu natif

Question

Il semble qu’avec position:absolute d’utilisation, 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',
  },
 

Answer 1

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>
 

Answer 2

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 )

Answer 3

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

Answer 4

Vous pouvez essayer le code

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