React Native中的Absolute和Flexbox [英] Absolute and Flexbox in React Native

问题描述

我想放一个白色条，它会占据屏幕底部的全宽。为此，我考虑使用绝对定位继承的 flexbox 参数。

I would like to put a white bar which would take the all width at the bottom of the screen. To do so I thought about using absolute positioning with the inherited flexbox parameters.

使用下面的代码呈现类似这个的内容。

With the code following it renders something like 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中的所有属性都可用。所以任何帮助都表示赞赏，谢谢：）

I'm new in styling in CSS and not all the properties are available in React-Native. So any help is appreciated, thanks :)

推荐答案

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

Ok, solved my problem, if anyone is passing by here is the answer:

只需添加 left：0，和 top：0，对样式，是的，我很累。

Just had to add left: 0, and top: 0, to the styles, and yes, I'm tired.

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

这篇关于React Native中的Absolute和Flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！