React-Native：alignItems设置为'center'时，宽度未从分区视图继承

Question

我再次与React-Native一起玩，这次只关注布局，遇到了一个有趣的问题。如果我在父视图上设置alignItems：'center'，则其下的子级似乎没有正确设置其宽度。

此代码将产生一个占据整个屏幕的绿色框。

React.createClass({
  render: function() {
    return (
      <View style={{flex: 1, alignItems: 'center',backgroundColor:'green'}}>
        <View style={{flex:1, backgroundColor:'blue'}} />      
        <View style={{flex:1, backgroundColor:'red'}} />
      </View>
    );
  }
});

但是，如果我删除alignItems样式或将其设置为“ stretch”，则会像预期的那样在红色框上方显示一个蓝色框

var BrownBag = React.createClass({
  render: function() {
    return (
      <View style={{flex: 1, backgroundColor:'green'}}>
        <View style={{flex:1, backgroundColor:'blue'}} />      
        <View style={{flex:1, backgroundColor:'red'}} />
      </View>
    );
  }
});

我对alignItems的工作方式有什么了解？

Answer 1

问题是，当您添加alignItems: 'center'内部项目时，其内部宽度变为零，因此它们自身会折叠。您可以像这样在子视图中添加一些宽度来自己查看...

    <View style={{flex: 1, backgroundColor:'green', alignItems: 'center'}}>
      <View style={{flex:1, backgroundColor:'blue', width: 300}} />      
      <View style={{flex:1, backgroundColor:'red', width: 300}} />
    </View>