リアクションネイティブ絶対配置の水平方向の中心

Question

position:absoluteを使用している場合、justifyContentまたはalignItemsを使用して要素を中央に配置できないようです。 marginLeftを使用するには回避策がありますが、デバイスの高さと幅を検出するためのディメンションを使用しても、すべてのデバイスで同じものを表示するわけではありません。

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

次の2つ、あなたがの幅を中央したい要素の半分を減算することにより、分割デバイスの幅と左プロパティを提供することにより、絶対的なアイテムを中心にすることができます。

たとえば、あなたのスタイルは次のようになります。

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