ReactNativeの絶対位置決め水平中心

92

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

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

— ハーセン
ソース

要素の幅は静的ですか、それとも動的ですか？

— Ivan Chernykh 2016年

250

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

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

— スティーブンホルヴァート
ソース

28

非常に便利。StyleSheetオブジェクトからぶら下がっているスタイルパラメータには、便利なショートカットがあります...StyleSheet.absoluteFillObject。github.com/facebook/react-native/blob/master/Libraries/を

— wkw

2

これによりView、画面上のクリック可能なすべてのスペースが占有されませんか？たとえば、この絶対位置の下にコンポーネントがある場合、そのViewクリックを登録することはできません。

— James111 2018年

10

@ James111それはあなたが追加することができますように見えるpointerEvents='box-none'ビューを介してタッチを渡す：github.com/facebook/react-native/issues/12360

— スティーブンHorvathの

このメソッドは、テキストに背景色がある場合に画像全体を

— 復元し

うん@codewise、それは、私の答えをチェックアウト行うための新しい方法があります

— デヴィッドノレナ

73

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

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

これは例です（ロゴの親は位置：relativeのビューであることに注意してください）

— デビッド・ノレーニャ
ソース

1

alignSelfは私には機能しませんでした（実際には何もしませんでした）。コードにもう少しコンテキストを追加できますか？

— johnnykehr19年

1

親を表示する必要があります： 'flex' @ wilc0

— TravisDelly19年

12

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

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

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

— コーリー
ソース

これは、要素の幅を事前に知っている場合にのみ機能します

— Adamski 2017

1

要素に既知の幅がないことがわからない場合は、onLayoutを使用して要素の幅を取得できます

measure(layout) {      const { width } = layout;      this.setState({ width: width }) } ... <View     onLayout={(event) => { this.measure(event.nativeEvent.layout) }} ...

— Corey

5

全幅Viewを作成してから、alignItems: "center"必要な子を中に挿入します。

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

<View style={{...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center'}}>
  <Text>CENTERD TEXT</Text>
</View>

そしてこれを追加します

import {StyleSheet} from 'react-native';

— マハディバシルプール
ソース

短い、コードのみの回答は、StackOverflowでしばしば嫌われます。「低品質」としてフラグが立てられるのを避けるために、説明テキストを追加することを検討してください。

— エイドリアンモール

1

あなたはコードを試すことができます

<View
    style={{
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <View
      style={{
        position: 'absolute',
        margin: 'auto',
        width: 50,
        height: 50
      }}
    />
  </View>

— エリスマブ
ソース

はは。これは、しかし、我々は`スタイル= { '中央'、justifyContent： 'センター'、flexDirection：{alignItems '行を'}}を追加する必要が、私のために働いている`

— babie

1

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

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

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

— user11360198
ソース