alignItems：'flex-end' 不能正常工作（它没有覆盖整个页面） - 反应原生 [重复]

Question

所以在我的主页上，我有 4 个按钮，我用 flex 布置了这些按钮。我已经设置了父级的 flex: 1，这意味着它覆盖了整个页面（我已经用 backgroundColor 确定了这一点）。我的问题是，当我设置 alignItems: 'flex-end' 时，按钮只会向下移动一点，好像 flex 只覆盖了一半的页面。

这是我的代码标记：

<Card style={styles.cardStyle}>
      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("NewScreen")}>
          New
        </Button>
      </CardSection>

      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("SavedScreen")}>
          Saved
        </Button>
      </CardSection>

      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("ParametersScreen")}>
          Settings
        </Button>
      </CardSection>

      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("FMRScreen")}>
          FMR
        </Button>
      </CardSection>

    </Card>

卡片样式：

cardStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#0000ff',
}

CardSection 样式：

containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    borderColor: '#ddd',
    height: 150,
    width: 150,
    borderRadius: 20,
    marginTop: 10,
},

以及项目的样式：

textStyle: { 
    color: '#007aff',
    fontSize: 20,
    fontWeight: '600',
},
buttonStyle: {
    backgroundColor: 'rgba(255, 255, 255, 0)',
    borderWidth: 0,
    borderColor: '#007aff',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
},

这就是我得到的：

请注意，如果我删除 flexWrap: 'wrap'，这个问题就会消失，但我不能这样做！

有什么想法吗？

Answer 1

您需要执行类似的操作才能使其正常工作，其中 <Card> 元素是 flex 项的最外层 flex 父级。

注意添加的alignContent: 'flex-end'，这是弹性项目包装时需要的

<Card style={styles.containerStyle}>

  <CardSection style={styles.sectionStyle}>
    <Button onPress={() => navigate("NewScreen")}>
      New
    </Button>
  </CardSection>

  <CardSection style={styles.sectionStyle}>
    <Button onPress={() => navigate("SavedScreen")}>
      Saved
    </Button>
  </CardSection>

  <CardSection style={styles.sectionStyle}>
    <Button onPress={() => navigate("ParametersScreen")}>
      Settings
    </Button>
  </CardSection>

  <CardSection style={styles.sectionStyle}>
    <Button onPress={() => navigate("FMRScreen")}>
      FMR
    </Button>
  </CardSection>

</Card>

containerStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    alignItems: 'flex-end',
    alignContent: 'flex-end',
    backgroundColor: '#0000ff',
}

sectionStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    borderColor: '#ddd',
    height: 150,
    width: 150,
    borderRadius: 20,
    marginTop: 10,    
}