自动适应弹性布局中的元素

Question

我被这个示例代码更容易解​​释的东西所困扰

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

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={styles.square} />
        <View style={styles.square} />
        <View style={styles.square} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  },
  row: {
    height: 100,
    flexDirection: "row",
    backgroundColor: "red",
  },
  square: {
    aspectRatio: 1,
    margin: 20,
    backgroundColor: "green",
  }
});

export default App;

目前我只是在固定高度为 100 的红色行内绘制 3 个绿色方块。

在每台设备上，我可能都会有这 3 个方块，然后是右侧的一些“可用空间”。 （图一）

如果增加行高，右侧的“可用空间”会减少，直到方块超过可用宽度。 （图二）

现在，我不能让这 3 个方块自动适应页面，当行高足够大时，只在它们的底部留下“可用空间”。 （图三和四）

我可以玩 onLayout 道具，或者我可以对元素大小进行某种数学运算，但我想保持简单并尝试了解是否可以使用 flexbox 解决问题正确的方法。

几张图片可以更好地解释这个场景：

上面它是如何工作的就知道了。图1没问题。图2是我不想要的。当行高不足以容纳正方形时，它应该如下图所示。

小提琴here

Answer 1

你只需要在容器中添加align-items: baseline样式，并像这样将.square的项目变成flex-grow: 1

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  },
  row: {
    flexDirection: "row",
    height: 500,
    alignItems: 'baseline',
    backgroundColor: "red"
  },
  square: {
    aspectRatio: 1,
    flexGrow: 1,
    backgroundColor: "green",
    margin: 20
  }
});

align-items 以默认宽度排列弹性项目，flex-grow 属性将使项目增长以填充容器的宽度，并且由于弹性增长是相等的，因此项目增长将在整个容器中相等容器

如果您希望.square 项目位于中心，您只需更改align-items 属性