如何在react native - flatList中创建两个带有空间beetwen的列

Question

嗨,我是React Native的新手.

我正在尝试创建两个列布局与空间beetween使用反应本机组件称为flatList.

这是我的观点代码:

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

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

Answer 1

您可以为项目本身指定宽度值45%。此外， flatlist 有一个名为的属性columnWrapperStyle，您可以提供 value justifyContent: 'space-between。

这是一个例子：

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

Answer 2

使用ItemSeparatorComponent为使项目之间的compontent

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

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

在水平列表中预览

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

Answer 3

如何创建项目之间间距相等的两列：

    <FlatList 
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        horizontal={false}   // you must include this line when using numColumns [per the documentation][1]
        numColumns={2}   // creates two columns
        key={2}   // add key to prevent error from being thrown
        columnWrapperStyle={{justifyContent: 'space-between'}}   // causes items to be equally spaced
    >

此外，这会将每列设置为屏幕宽度的 1/2：

const styles = StyleSheet.create({
item: {
      flex: 1/2,
}})

Answer 4

你必须给styles.container到contentContainerStyleFlatlist,像这样的欢迎使用属性:

<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>
            )
        }
    />

Answer 5

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