Question

你好，我是React Native的新人。

我正在尝试使用名为flatList的反应本机组件创建两个具有空间beetween的列布局。

这是我的观点代码：

<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的属性，您可以为它赋予值justifyContent: 'space-between。

这里有个例子：

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

Answer 2

您必须将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>
            )
        }
    />

Answer 3

只需在列表项的样式中添加一些余量。

listItem: {
  margin: 10,
}

Answer 4

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

Answer 5

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

    <FlatList
        data={places}
        contentContainerStyle={{ paddingLeft: responsiveSize( 32 ) }}
        style={[
            styles.wrapperPlaces,
            placesDetailActive
                ? styles.wrapperPlacesPlacesDetailActive
                : null
        ]}
        horizontal
        ItemSeparatorComponent={() => <Spacing size="medium" horizontal />}
        keyExtractor={item => item.id}
        renderItem={( { item } ) => (
            <PlaceBox place={item} onPress={() => onPressPlace( item.id )} />
        )}
    />

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

根据您的喜好或规格自定义：）

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

6 个答案: