Absolute dan Flexbox di React Native

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

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,

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

Solusi ini berhasil untuk saya:

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