Абсолютный и Flexbox в реале

Я хотел бы поставить белый бар, который будет занимать всю ширину в нижней части экрана. Для этого я подумал об использовании позиционирования 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. Поэтому любая помощь приветствуется, спасибо:)

Ответ 1

Хорошо, решил мою проблему, если кто-то проходит мимо, вот ответ:

Просто нужно добавить стили left: 0, и top: 0,, и да, я устал.

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

Ответ 2

Первым шагом будет добавить

position: 'absolute',

то, если вы хотите, чтобы весь элемент был заполнен, добавьте

left: 0,
right: 0,

тогда, если вы хотите поместить элемент в нижнюю часть, добавьте

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

если вы хотите поместить элемент вверху, замените bottom: 0 на top: 0

Ответ 3

Это решение работало для меня:

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