Absolute và Flexbox trong React Native

Tôi muốn đặt một thanh màu trắng sẽ chiếm toàn bộ chiều rộng ở cuối màn hình. Để làm như vậy, tôi đã nghĩ đến việc sử dụng absoluteđịnh vị với các flexboxtham số kế thừa .

Với đoạn mã sau, nó hiển thị một cái gì đó như thế này .

Đây là mã của tôi:

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

Tôi mới làm quen với việc tạo kiểu trong CSS và không phải tất cả các thuộc tính đều có sẵn trong React-Native. Vì vậy, bất kỳ sự giúp đỡ nào được đánh giá cao, cảm ơn :)

Ok, đã giải quyết được vấn đề của tôi, nếu có ai đi ngang qua đây là câu trả lời:

Chỉ cần có thêm left: 0,và top: 0,đến phong cách, và vâng, tôi mệt mỏi.

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

Bước đầu tiên là thêm

position: 'absolute',

sau đó nếu bạn muốn phần tử có chiều rộng đầy đủ, hãy thêm

left: 0,
right: 0,

sau đó, nếu bạn muốn đặt phần tử ở dưới cùng, hãy thêm

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

nếu bạn muốn đặt phần tử ở trên cùng, hãy thay thế bottom: 0bằngtop: 0

Giải pháp này đã làm việc cho tôi:

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