React Native mutlak konumlandırma yatay merkez

93

Görünüşe göre position:absolutekullanımda bir öğe justifyContentveya kullanılarak ortalanamaz alignItems. marginLeftCihazın yüksekliğini ve genişliğini algılamak için boyutları kullansa bile tüm cihazlar için aynı şeyi göstermeyen bir geçici çözüm var .

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

— Hasen
kaynak

Öğenizin statik genişliği mi yoksa dinamik mi?

— Ivan Chernykh

252

Bir Görünüme ortalanmasını istediğiniz çocuğu sarın ve Görünümü mutlak yapın.

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

— Stephen Horvath
kaynak

28

Çok kullanışlı. Arasında asılı olanlar stil parametreleri için güzel bir kestirme var StyleSheetnesne: ...StyleSheet.absoluteFillObject. bkz. github.com/facebook/react-native/blob/master/Libraries/…

— wkw

2

Bu View, ekrandaki TÜM tıklanabilir alanı kaplamaz mı? Örneğin, bunun altına kesinlikle yerleştirilmiş bir bileşen Viewolsaydı, tıklamaları kaydedemezdim.

— James111

10

@ James111 Görünümde pointerEvents='box-none'dokunuşları geçmek için ekleyebileceğiniz gibi görünüyor : github.com/facebook/react-native/issues/12360

— Stephen Horvath

Metnin bir arka plan rengi varsa bu yöntem tüm görüntüyü kurtarır: /

— DevMultiTech

@codewise evet, bunu yapmanın yeni bir yolu var, cevabımı kontrol edin

— David Noreña

73

Bir öğenin kendisini ortalamak istiyorsanız, alignSelf'i kullanabilirsiniz :

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

Bu bir örnektir (Ana logo, konum: göreceli bir görünümdür )

— David Noreña
kaynak

1

alignSelf benim için çalışmadı (aslında hiçbir şey yapmadı). Koda biraz daha fazla bağlam ekleyebilir misiniz?

— johnny kehr

1

Ebeveynin gösterilmesi gerekiyor: 'flex' @ wilc0

— Travis Delly

12

Sol mülke aygıtın genişliğini ikiye bölerek ve ortalamak istediğiniz öğenin yarısını çıkararak mutlak öğeleri ortalayabilirsiniz.

Örneğin tarzınız şuna benzer olabilir.

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

— Corey
kaynak

bu yalnızca elemanların genişliğini önceden biliyorsanız işe yarar

— Adamski

1

Öğenin bilinen bir genişliğe sahip olmadığını bilmiyorsanız, öğelerin genişliğini elde etmek için onLayout'u kullanabilirsiniz

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

— Corey

7

Viewile tam genişlik oluşturun ve alignItems: "center"ardından istenen çocukları içine yerleştirin.

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: 30Alta hizalanmış bileşen gibi özellikler ekleyebilirsiniz .

— Masbossun
kaynak

Bunun doğru cevap olarak kabul edilmesi gerekir, bu hemen hemen her durumda işe yarar.

— aprilmintacpineda

2

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

Ve bunu ekle

import {StyleSheet} from 'react-native';

— Mehdi Beşirpur
kaynak

Kısa, yalnızca kod yanıtları genellikle Stack Overflow'da hoş karşılanmaz. "Düşük kaliteli" olarak işaretlenmekten kaçınmak için, bazı açıklayıcı metinler eklemeyi düşünün.

— Adrian Mole

1

Kodu deneyebilirsin

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

— Eris Mabu
kaynak

Haha. Bu benim için çalışıyor, Ancak, `style = {{alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}} 'eklememiz gerekiyor

— babie

1

Gerçekten çok basit. widthVe leftözellikleri için yüzde kullanın . Örneğin:

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

Her ne widthise lefteşittir(100% - width)/2

— user11360198
kaynak