alignItems属性无法正常工作。React Native中的flexbox yoga

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

- hsafarya

Answer 1

这不是一个Bug，而是默认的行为。

alignItems的默认值为stretch，它使得flex项目沿着其父容器的交叉轴（在React Native中默认为宽度）进行拉伸。

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

- Asons

Answer 2

通过将样式 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>
    );
  }
}

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

- Kishan Mundha