时间戳

首页 > 解决方案 > 在 FlatList 中渲染空单元格/分隔符

javascript - 在 FlatList 中渲染空单元格/分隔符

问题描述

我有这个平面列表：

<FlatList
    data={orders}
    keyExtractor={(item) => item.id}
    style={{ height: "100%", borderWidth: 1 }}
    renderItem={({ item }) => (
    <ListItem
        {...item}
        onPress={(id) => alert(`touched ${id}`)}
    />
    )}
    ListEmptyComponent={() => (
    <Text>
        The list is empty.
    </Text>
    )}
    ItemSeparatorComponent={() => <Separator />}
/>

分隔符组件如下所示：


const styles = StyleSheet.create({
  ...
  separator: {
    flex: 1,
    height: 1,
    backgroundColor: "#e4e4e4",
    marginLeft: 10,
  },
  ...
});
const Separator = () => <View style={styles.separator} />;

当我只渲染几个项目时，其余的FlatList看起来完全是空的（用黑色勾勒出来）。如何FlatList在空项目之间制作渲染分隔符，以便清楚那里有一个列表，即使它（大部分）是空的，所以它看起来不那么空白？

仅渲染一项 渲染一些项目

标签： javascriptreact-nativeuser-interfacereact-native-flatlist

解决方案

这就是ItemSeparatorComponent道具的工作原理，它仅在至少有 2 个元素时显示，并Separator在项目之间添加您的组件。如果您需要添加它，即使它只是一个元素，您也需要手动添加：

renderItem={({ item }) => (
    orders.length > 1 
       ? <ListItem
            {...item}
            onPress={(id) => alert(`touched ${id}`)}
          />
       : <>
           <ListItem
              {...item}
              onPress={(id) => alert(`touched ${id}`)}
           />
           <Separator />
         </>
)}

推荐阅读