React native React Native：当alignItems设置为'；时，不会从partent视图继承宽度；中心'；

我又在玩React Native了，这次主要关注布局，遇到了一个有趣的问题。如果在父视图上设置alignItems:“居中”，则该视图下的子视图似乎没有正确设置其宽度

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

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>
    );
  }
});

React.createClass({
render:function（）{
返回(
);
}
});

但是，如果我删除alignItems样式或将其设置为“拉伸”，我会像预期的那样在红色框的顶部得到一个蓝色框

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>
    );
  }
});

var BrownBag=React.createClass({
render:function（）{
返回(
);
}
});

---

在理解alignItems的工作原理时，我遗漏了什么？

问题是，当您添加

alignItems:“居中”

时，内部项目的宽度变为零，因此它们会自行折叠。通过向子视图添加一些宽度，您可以自己看到这一点，如

    <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>

---

啊，这很有道理！如果不提供视图所需的最小宽度，并且没有设置该值，则无法将其居中，即为0。我有点吃惊，因为事实上我正试图用弹性尺寸的图片填充红色框。但如果父视图的宽度为0，则内部图像的弹性大小也将为零。谢谢