React Nativo posizionamento assoluto centro orizzontale

Question

Sembra che con position:absolute in uso un elemento non possa essere centrato utilizzando justifyContent o alignItems. C'è una soluzione alternativa per utilizzare marginLeft ma non viene visualizzata la stessa per tutti i dispositivi, anche utilizzando le dimensioni per rilevare l'altezza e la larghezza del dispositivo.

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

Answer 1

Avvolgere il bambino che si desidera centrare in una vista e rendere assoluta la vista.

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

Answer 2

È possibile centrare gli elementi assoluti, fornendo la proprietà sinistra con la larghezza del dispositivo diviso per due e sottraendo dalla metà del elemento che desideri la larghezza del centro.

Ad esempio, il tuo stile potrebbe essere simile a questo.

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