alignItems 无法正常工作。 React Native flexbox瑜伽[重复]答案

【问题标题】：alignItems not working correctly. React Native flexbox yoga [duplicate]alignItems 无法正常工作。 React Native flexbox瑜伽[重复]
【发布时间】：2018-07-29 13:06:54
【问题描述】：

这是代码示例：预期的行为是它应该显示一个具有绿色背景的视图。在容器上设置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'
  }
});

【问题讨论】：

标签： ios react-native flexbox

【解决方案1】：

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

alignItems 默认值为stretch，这使得flex item stretch 沿着其父级的横轴，对于column，方向是宽度，React Native 中的默认值。

因此，当您将其更改为 center 时，它开始表现得像一个内联元素，并折叠到它的内容，否则 center 不能居中它，如果它仍然有全宽。

【讨论】：

【解决方案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'
  }
});

【讨论】：