我想在屏幕底部放一个白色的条,它将占据所有宽度。为此,我考虑过将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中使用。因此,任何帮助表示赞赏,谢谢:)

最佳答案

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

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

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

关于javascript - React Native中的Absolute和Flexbox,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29541971/

10-10 10:31