React Native posisi pusat horizontal absolut

93

Tampaknya dengan position:absolutedigunakan elemen tidak dapat dipusatkan menggunakan justifyContentatau alignItems. Ada solusi untuk digunakan marginLefttetapi tidak menampilkan yang sama untuk semua perangkat bahkan menggunakan dimensi untuk mendeteksi tinggi dan lebar perangkat.

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

— Hasen
sumber

Apakah elemen Anda memiliki lebar statis atau dinamis?

— Ivan Chernykh

252

Bungkus anak yang Anda inginkan di tengah View dan jadikan View absolut.

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

— Stephen Horvath
sumber

28

Sangat berguna. Ada jalan pintas yang bagus bagi mereka params gaya menggantung dari StyleSheetobjek: ...StyleSheet.absoluteFillObject. lihat github.com/facebook/react-native/blob/master/Libraries/…

— wkw

2

Bukankah ini membuat Viewmengambil SEMUA ruang yang dapat diklik di layar? Misalnya jika saya memiliki komponen di bawah posisi mutlak ini View, saya tidak akan dapat mendaftarkan klik di atasnya.

— Yakobus111

10

@ James111 Sepertinya Anda dapat menambahkan pointerEvents='box-none'sentuhan melalui tampilan: github.com/facebook/react-native/issues/12360

— Stephen Horvath

Metode ini memulihkan seluruh gambar jika teks memiliki warna latar belakang: /

— DevMultiTech

@codewise ya, ada cara baru untuk melakukannya, lihat jawaban saya

— David Noreña

73

Jika Anda ingin memusatkan satu elemen itu sendiri, Anda dapat menggunakan alignSelf :

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

Ini adalah contoh (Perhatikan logo induk adalah tampilan dengan posisi: relatif )

— David Noreña
sumber

1

alignSelf tidak berhasil untuk saya (sebenarnya tidak ada). Bisakah Anda menambahkan sedikit lebih banyak konteks ke kode?

— johnny kehr

1

Anda memerlukan orang tua untuk ditampilkan: 'flex' @ wilc0

— Travis Delly

12

Anda dapat memusatkan item absolut dengan menyediakan properti left dengan lebar perangkat dibagi dua dan mengurangi setengah elemen yang Anda inginkan ke lebar tengah.

Misalnya, gaya Anda mungkin terlihat seperti ini.

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

— Corey
sumber

ini hanya berfungsi jika Anda mengetahui lebar elemen sebelumnya

— Adamski

1

Jika Anda tidak mengetahui bahwa elemen tidak memiliki lebar yang diketahui, Anda dapat menggunakan onLayout untuk mendapatkan lebar elemen

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

— Corey

7

membuat penuh-lebar Viewdengan alignItems: "center"anak-anak maka insert yang diinginkan dalam.

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>    
    )
  }
}

Anda dapat menambahkan properti seperti bottom: 30untuk komponen rata bawah.

— masbossun
sumber

Ini harus diterima sebagai jawaban yang benar, ini berfungsi untuk hampir semua situasi.

— aprilmintacpineda

2

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

Dan tambahkan ini

import {StyleSheet} from 'react-native';

— Mahdi Bashirpour
sumber

Jawaban singkat dan hanya kode sering kali tidak disukai di Stack Overflow. Untuk menghindari ditandai sebagai 'kualitas rendah', pertimbangkan untuk menambahkan beberapa teks penjelasan.

— Adrian Mole

1

Anda dapat mencoba kodenya

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

— Eris Mabu
sumber

Ha ha. Ini berfungsi untuk saya, Namun, kita perlu menambahkan `style = {{alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}`

— babie

1

Ini sangat sederhana. Gunakan persentase untuk widthdan leftproperti. Sebagai contoh:

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

Apapun widthitu, leftsama(100% - width)/2

— pengguna11360198
sumber