使用 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 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"
  }

使用 flex 将项目添加到 n 列网格中

Adding items into n column grids using flex

reactjs

react-native

react-native-flexbox

react-native-stylesheet