reactjs - 使用 Flex 将项目添加到 n 列网格中

Question

我正在尝试创建一个与下图类似的项目列表。

目前我正在创建一个 RowComponent 并在其中包含 ItemContainer 组件以创建上述效果。

const styles = StyleSheet.create({
  containerStyle: {
    display: 'flex',
    flexDirection: 'row',
  },
});

const RowComponent = () => {
  const { containerStyle } = styles;

  return (
    <View style={containerStyle}>
      <ItemContainer />
      <ItemContainer />
    </View>
  );
};

主屏幕 View

<View style={containerStyle}>
  <RowComponent />
  <RowComponent />
</View>

我发现这种方法效率非常低，因此我希望知道如何通过复制 ItemContainer 来创建上述效果来创建这种效果。

例如:

<View style={containerStyle}>
  <ItemContainer />
  <ItemContainer />
  <ItemContainer />
  <ItemContainer />
</View>

Answer 1

how I can create this effect by just duplicating the ItemContainer to create the mentioned effect.

您可以在 containerStyle 中将 flexWrap 属性设置为 wrap。像这样:

  containerStyle: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap:"wrap"
  },

现在，无需 RowComponent，您也可以实现相同的布局。

<小时/>

<View style={styles.containerStyle}>

    <View style={styles.itemContainer} />
    <View style={styles.itemContainer} />
    <View style={styles.itemContainer} />
    <View style={styles.itemContainer} />
    <View style={styles.itemContainer} />

</View>

风格:

  containerStyle: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap:"wrap"
  },
  itemContainer: {
    width:"45%",
    height:80,
    marginRight:"5%",
    marginBottom:10,
    backgroundColor:"red"
  }