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无法居中它，如果它仍然会全宽。

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

alignItems无法正常工作。 React Native flexbox瑜伽

2 个答案: