如何在本机反应中创建两列之间有空格 - flatList答案

【问题标题】：How to create two columns with space beetwen in react native - flatList如何在本机反应中创建两列之间有空格 - flatList
【发布时间】：2017-09-06 18:44:19
【问题描述】：

您好，我是 React Native 的新手。

我正在尝试使用名为 flatList 的 react 本机组件创建两列布局，其中包含空间之间的空间。

这是我的查看代码：

<View style={styles.container}>
        <FlatList
            data={db}
            keyExtractor={ (item, index) => item.id }
            numColumns={2}
            renderItem={
                ({item}) => (
                    <TouchableWithoutFeedback  onPress ={() => showItemDetails(item.id)}>
                        <View style={styles.listItem}>
                            <Text style={styles.title}>{item.name}</Text>
                            <Image
                                style={styles.image}
                                source={{uri: item.image}}
                            />
                            <Text style={styles.price}>{item.price} zł</Text>
                        </View>
                    </TouchableWithoutFeedback>
                )
            }
        />
    </View>

这里是样式：

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
    marginBottom: 40
},
listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
},

结果是两列，但之间没有空格。你能帮我解决这个问题吗？

【问题讨论】：

标签： javascript android reactjs mobile react-native

【解决方案1】：

您可以给项目本身的宽度值45%。此外，flatlist 有一个名为 columnWrapperStyle 的属性，您可以将其赋值为 justifyContent: 'space-between。

这是一个例子：

<FlatList
    columnWrapperStyle={{justifyContent: 'space-between'}}
    data={ApiData}
    numColumns={2}
    renderItem={({item}) => {
      return (
         <item style={{width: '45%'}} />
      );
    }}
/>

【讨论】：

无法使用 columnWrapperStyle={{justifyContent: 'space-between'}}
您是否给它自己的项目设置了 45% 的宽度，例如
对我来说，space-around 看起来比 space-between 更好。

【解决方案2】：

使用ItemSeparatorComponent 渲染项目之间的组件

文档：在每个项目之间呈现，但不在顶部或底部。

    <FlatList
        data={arrayOfData}
        horizontal
        ItemSeparatorComponent={
            () => <View style={{ width: 16, backgroundColor: 'pink' }}/>
        }
        renderItem={({ item }) => (
            <ItemView product={item} />
        )}
    />

水平列表预览

如果列表是垂直的并且假设columnCount是2

【讨论】：

【解决方案3】：

您必须将 styles.container 提供给 Flatlist 的 contentContainerStyle 属性，如下所示：

<FlatList
        data={db}
        keyExtractor={ (item, index) => item.id }
        contentContainerStyle={styles.container}
        numColumns={2}
        renderItem={
            ({item}) => (
                <TouchableWithoutFeedback  onPress ={() => showItemDetails(item.id)}>
                    <View style={styles.listItem}>
                        <Text style={styles.title}>{item.name}</Text>
                        <Image
                            style={styles.image}
                            source={{uri: item.image}}
                        />
                        <Text style={styles.price}>{item.price} zł</Text>
                    </View>
                </TouchableWithoutFeedback>
            )
        }
    />

【讨论】：

【解决方案4】：

只需为列表项的样式添加一些边距。

listItem: {
  margin: 10,
}

【讨论】：

这会弄乱 flatList 滚动偏移量，从而产生一个无法滚动到内容底部的可滚动列表。

【解决方案5】：

我没有使用过这个库，但是将padding: 10 添加到 listItem 样式应该会有所帮助。

【讨论】：

【解决方案6】：

根据您的示例，您似乎可以将margin 添加到列表项样式中：

listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
    margin: 18,
},

请记住，这相当于做：

listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
    marginTop: 18,
    marginBottom: 18,
    marginRight: 18,
    marginLeft: 18,
},

根据您的喜好或规格定制 :)

【讨论】：

【解决方案7】：

假设您的项目是flex:1 并且没有指定宽度。如果需要，您可以使用另一个添加填充的视图来包装您的 renderItem


function columnWrappedRenderItemFunction<ItemT>(
  renderItem: ListRenderItem<ItemT>,
  numColumns: number,
  space: FlatListProps<ItemT>["space"],
  numberOfItems: number
): FlatListProps<ItemT>["renderItem"] {
  return function columnWrappedRenderItem({
    index,
    ...props
  }: Parameters<ListRenderItem<ItemT>>[0]): ReturnType<ListRenderItem<ItemT>> {
    const needsGapOnLeft = index % numColumns !== 0;
    let extraItems = 0;
    if (index === numberOfItems - 1) {
      extraItems = (numColumns - (numberOfItems % numColumns)) % numColumns;
    }
    if (needsGapOnLeft) {
      return (
        <>
          <View style={{width:space}} />
          {renderItem({ index, ...props })}
          {Array.from({ length: extraItems }, (_, k) => (
            <View key={"extra_" + k} style={{marginLeft:space, flex:1}} />
          ))}
        </>
      );
    } else {
      return (
        <>
          {renderItem({ index, ...props })}
          {Array.from({ length: extraItems }, (_, k) => (
            <View key={"extra_" + k} marginLeft={space} style={{flex:1}} />
          ))}
        </>
      );
    }
  };
}

例如

function myRenderItem() { ... }
...
return (<FlatList 
   ...
   data={data}
   renderItem={
     numColumns === 1
          ? renderItem
          : columnWrappedRenderItemFunction(
              renderItem,
              numColumns,
              space,
              data.length
            )
      }
   numColumns={numColumns}
   ItemSeparatorComponent={() => <View style={{height: space}} />}
  />);

【讨论】：