0

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

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 个方块，然后是右侧的一些“可用空间”。（图片1）

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

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

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

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

情况1 案例2

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

案例3 案例4

在这里提琴

4

1 回答 1

0

你只需要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属性

于 2021-09-29T08:35:20.457 回答