React Native中的Absolute和Flexbox

Question

我想放一个白色条,它会占据屏幕底部的所有宽度.为此,我考虑使用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中提供的所有属性.所以任何帮助都表示赞赏,谢谢:)

Answer 1

好的,解决了我的问题,如果有人路过这里就是答案:

只是必须添加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