1

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

目前我正在创建一个 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>

在此处输入图像描述

4

1 回答 1

1

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

flexWrap可以wrapcontainerStyle. 像这样:

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

在此处输入图像描述

于 2019-09-05T05:34:47.973 回答