对齐项目无法正常工作。React Native 弹性盒瑜伽

Question

下面是代码示例： 预期的行为是它应该显示具有绿色背景的视图。当alignItems: 'center'在容器上设置 时，不会显示绿色背景的视图。alignItems: 'center'从容器样式中取出显示绿色视图。有人可以解释为什么它会这样工作，这不是布局系统中的错误吗？提前致谢。

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <View style={{flex: 1, backgroundColor:'green'}}>
       </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Answer 1

这不是错误，而是默认行为。

alignItems默认值为stretch，这使得 Flex 项目沿着其父项的横轴拉伸column，方向是宽度，这是 React Native 中的默认值。

因此，当您将其更改为 时center，它开始表现得像内联元素，并折叠到其内容，否则center无法将其居中（如果它仍然具有全宽度）。