React-Native：当 alignItems 设置为“中心”时，宽度不会从父视图继承

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 样式或将其设置为“拉伸”，我会得到一个红色框顶部的蓝色框，正如我所期望的那样

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>