Absolute и Flexbox in React Native

Question

Я хотел бы положить белый бар, который будет занимать всю ширину в нижней части экрана. Для этого я подумал об использовании позиционирования absolute с унаследованными параметрами flexbox.

С кодом, следующим за ним, отображается примерно this.

Вот мой код:

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. Таким образом, любая помощь приветствуется, спасибо :)

Answer 1

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

Просто пришлось добавить left: 0, и top: 0, к стилям, и да, я устала.

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

Answer 2

Первый шаг должен был бы добавить

position: 'absolute', 

затем, если вы хотите, чтобы элемент всю ширину, добавьте

left: 0, 
right: 0, 

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

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

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

Answer 3

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

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