Absolute และ Flexbox ใน React Native

ฉันต้องการใส่แถบสีขาวซึ่งจะใช้ความกว้างทั้งหมดที่ด้านล่างของหน้าจอ ในการทำเช่นนั้นฉันคิดเกี่ยวกับการใช้การabsoluteกำหนดตำแหน่งกับflexboxพารามิเตอร์ที่สืบทอดมา

ด้วยรหัสต่อไปนี้จะแสดงผลบางอย่างเช่นนี้

นี่คือรหัสของฉัน:

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'
  },
});

ฉันยังใหม่กับการจัดรูปแบบใน CSS และคุณสมบัติบางอย่างอาจไม่มีใน React-Native ขอบคุณความช่วยเหลือใด ๆ ขอบคุณ :)

ตกลงแก้ไขปัญหาของฉันถ้าใครผ่านมาที่นี่คือคำตอบ:

แค่ต้องเพิ่มleft: 0,และtop: 0,ให้กับรูปแบบและใช่ฉันเหนื่อย

position: 'absolute',
left:     0,
top:      0,

ขั้นตอนแรกคือการเพิ่ม

position: 'absolute',

ถ้าคุณต้องการให้องค์ประกอบเต็มความกว้างให้เพิ่ม

left: 0,
right: 0,

จากนั้นหากคุณต้องการใส่องค์ประกอบที่ด้านล่างให้เพิ่ม

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

หากคุณต้องการวางตำแหน่งองค์ประกอบที่ด้านบนสุดให้แทนที่bottom: 0ด้วยtop: 0

วิธีนี้ใช้ได้ผลสำหรับฉัน:

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