React Native absolute Positionierung horizontale Mitte

Question

Es scheint, dass mit position:absolute in Verwendung ein Element nicht mit justifyContent oder zentriert werden kann. Es gibt eine Problemumgehung für die Verwendung von marginLeft, aber es wird nicht für alle Geräte angezeigt, auch wenn Dimensionen verwendet werden, um Höhe und Breite des Geräts zu erkennen.

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

Answer 1

Wickeln Sie das Kind, das Sie möchten, zentriert in einer Ansicht 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> 

Answer 2

Sie können absolute Produkte Zentrum von der linken Eigenschaft mit der Breite der Vorrichtung durch zwei geteilte Bereitstellung und die Hälfte des Elements Subtrahieren Sie Breite Zentrum möchten.

Zum Beispiel könnte Ihr Stil in etwa so aussehen.

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