相关疑难解决方法(0)

我再次与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的工作方式有什么了解？