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 style={containerStyle}>
  <RowComponent />
  <RowComponent />
</View>

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

例如：

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

标签： reactjsreact-nativereact-native-flexboxreact-native-stylesheet

Answer 1

我如何通过复制 ItemContainer 来创建上述效果来创建这种效果。

您flexWrap可以wrap在containerStyle. 像这样：

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