Réagir Positionnement natif absolu centre horizontal

Question

Il semble qu'avec position:absolute en cours d'utilisation un élément ne peut pas être centré en utilisant justifyContent ou alignItems. Il existe une solution de contournement pour utiliser marginLeft mais n'affiche pas la même chose pour tous les périphériques, même en utilisant des dimensions pour détecter la hauteur et la largeur du périphérique. Enveloppez l'enfant que vous voulez centré dans une vue et définissez la vue comme absolue.

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

Answer 1

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

Answer 2

Vous pouvez centrer les éléments absolus en fournissant des biens laissés à la largeur du dispositif divisé par deux et en soustrayant la moitié de l'élément que vous souhaitez à la largeur du centre. Par exemple, votre style pourrait ressembler à ceci.

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