React Doğal mutlak konumlandırma yatay merkezi

Question

Kullanımda position:absolute ile bir öğe justifyContent veya alignItems kullanılarak ortalanamıyor gibi görünüyor. marginLeft'u kullanmak için bir geçici çözüm var, ancak aygıtın yüksekliğini ve genişliğini algılamak için boyutları kullanarak bile tüm aygıtlar için aynı şeyi göstermiyor.

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

Answer 1

Görmek istediğiniz çocuğu bir Görünümde ortalayın ve Mutlak olarak görün.

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

Answer 2

Sen merkezin genişliği istediğiniz elemanın yarısını ikiye cihazın bölünmüş genişliği ile sol özelliğini sağlayan ve dışarı çıkarılarak mutlak öğeleri merkezine alabilirsiniz. Örneğin, stiliniz böyle bir şeye benziyor olabilir.

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