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

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

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

出典

2016-05-19 Hasen

要素に静的な幅または動的な要素がありますか？ – Cherniv

静的な幅です。 – Hasen

ビューに中央揃えしたい子をラップし、ビューを絶対にします。

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

出典

2016-12-06 20:36:23

非常に便利です。 'StyleSheet'オブジェクトにぶら下がっているそれらのスタイルパラメータの素敵なショートカットがあります：' ... StyleSheet.absoluteFillObject'。 https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheet.js#L29を参照してください。 – wkw

これは、 'View'が画面上のすべてのクリック可能な領域を占めるようにしていませんか？例えば、この絶対配置された 'View'の下にコンポーネントがあった場合、そのコンポーネントにクリックを登録することはできません。 – James111

@ James111あなたが知っていれば、これは、あなたがビューを通して接触を渡すために 'pointerEvents = 'box-none''を追加できるようです：https://github.com/facebook/react-native/issues/12360 –

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

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

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

出典

2017-02-12 00:27:13 Corey

要素の幅が事前に – Adamski

要素が既知の幅を持っていない場合、onLayoutを使用して要素の幅を取得できます。 'measure（layout）{ const {width} = layout; this.setState（{幅：幅}）} ... <表示 onLayout = {（イベント）=> {this.measure（event.nativeEvent.layout）}} ... ' – Corey

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

答えて

関連する問題