Absolute dan Flexbox di React Native

95

Saya ingin meletakkan bilah putih yang akan mengambil semua lebar di bagian bawah layar. Untuk melakukannya, saya berpikir untuk menggunakan absolutepemosisian dengan flexboxparameter yang diwariskan .

Dengan kode berikut ini membuat sesuatu seperti ini .

Ini kode saya:

var NavigationBar = React.createClass({
  render: function() {
    return(
    <View style={navigationBarStyles.navigationBar}>
      //Icon 1, Icon 2...
    </View>
    );
  }
});

var Main = React.createClass({
  render: function() {
    return(
      <View style={mainStyles.container}>
          <NavigationBar />
      </View>
    );
  }
});

var mainStyles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#456783',
  }
});

var navigationBarStyles = StyleSheet.create({
  navigationBar: {
    backgroundColor: '#FFFFFF',
    height: 30,
    position: 'absolute', 
    flexDirection: 'row',
    bottom: 0,
    justifyContent: 'space-between'
  },
});

Saya baru mengenal gaya dalam CSS dan tidak semua properti tersedia di React-Native. Jadi bantuan apa pun dihargai, terima kasih :)

javascript css react-native ilansas
sumber

Jawaban:

157

Ok, masalah saya terpecahkan, jika ada yang lewat berikut ini jawabannya:

Hanya harus menambahkan left: 0,dan top: 0,pada gaya, dan ya, saya lelah.

position: 'absolute',
left:     0,
top:      0,
ilansas
sumber
10
Terima kasih telah memposting itu. Dan tampaknya juga untuk ketinggian - alih-alih height:100%, lakukan top:0, bottom:0.
Premasagar
4
tetapi jika Anda ingin meletakkan bilah di bagian bawah, dan lebar penuh, Anda harus menambahkan left:0, right:0, dan tidak boleh menambahkan top:0, jika Anda mengatur top:0dan bottom:0, itu akan menampilkan layar penuh.
Spark.Bao
1
Bagaimana saya bisa memusatkan? Misalnya saya ingin menampilkan spinner di atas komponen saya dan saya ingin spinner menjadi absolut dan terpusat?
Murat Ozgul
1
Untuk mengisi semua ruang secara vertikal dengan penambahan posisi absolut anak top:0dan bottom:0bekerja sebagai pengganti `` tinggi: 100% ", bawa ke @Premasagar
Nick Pineda
1
Add Jus left, top, rightdan bottonke 0 dan bekerja sempurna.
jose920405
64

Langkah pertama adalah menambahkan

position: 'absolute',

lalu jika Anda menginginkan elemen dengan lebar penuh, tambahkan 

left: 0,
right: 0,

lalu, jika Anda ingin meletakkan elemen di bagian bawah, tambahkan

bottom: 0,
// don't need set top: 0

jika Anda ingin menempatkan elemen di atas, ganti bottom: 0dengantop: 0

Spark.Bao
sumber
4

Solusi ini berhasil untuk saya:

tabBarOptions: {
      showIcon: true,
      showLabel: false,
      style: {
        backgroundColor: '#000',
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40,
        position: 'relative',
        zIndex: 2,
        marginTop: -48
      }
  }
Alex
sumber