web-dev-qa-db-ja.com

Reactネイティブの絶対位置決め水平中心

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

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

ビューの中央に配置する子をラップして、ビューを絶対にします。

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

1つの要素自体を中央に配置する場合は、alignSelfを使用できます。

logoImg: {
    position: 'absolute',
    alignSelf: 'center',
    bottom: '-5%'
}

これは一例です（ロゴの親はposition：relativeのビューです））

enter image description here

32
David Noreña

Leftプロパティにデバイスの幅を2で割った値を指定し、中央に配置したい要素の半分を差し引くと、絶対アイテムを中央に配置できます。

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

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

alignItems: "center"を使用して全角のViewを作成してから、目的の子を内部に挿入します。

import React from "react";
import {View} from "react-native";

export default class AbsoluteComponent extends React.Component {
  render(){
    return(
     <View style={{position: "absolute", left: 0, right: 0, alignItems: "center"}}>
      {this.props.children}
     </View>    
    )
  }
}

下部に配置されたコンポーネントにbottom: 30などのプロパティを追加できます。

2
ryansetiagi

とても簡単です。 widthおよびleftプロパティにパーセンテージを使用します。例えば：

logo : {
  position: 'absolute',
  top : 50,
  left: '30%',
  zIndex: 1,
  width: '40%',
  height: 150,
}

widthが何であれ、leftは(100% - width)/2と等しい

0
user11360198