javascript - React Native 中的 Absolute 和 Flexbox

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

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

只需将 left: 0, 和 top: 0, 添加到样式中，是的，我累了。

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