如何将ItemSeparatorComponent添加到FlatList的最后一个项目

时间:2019-11-22 23:21:31

标签: reactjs react-native react-native-flatlist

我将Item SeparatorComponent用于FlatList。有没有一种方法可以将行添加到列表的末尾,例如最后一项的底部边框?

export default Item = ({ title, data }) => {

    const renderSeparator = () => (
        <View
          style={{
            backgroundColor: 'lightgrey',
            height: 0.5,
          }}
        />
    )

    return (
        <View style={styles.container}>
            <View style={styles.title}>
                <Text style={styles.titleText}>{title}</Text>
            </View>
            <View style={styles.subItem}>
                <FlatList
                    ItemSeparatorComponent={renderSeparator}   
                    data={data}
                    renderItem={({ item }) => (
                        <SubItem 
                            title={item.title} 
                            subText={item.subText} 
                        />
                    )}
                    keyExtractor={item => item.id.toString()}
                />
            </View>
        </View>
    )
}

1 个答案:

答案 0 :(得分:2)

下面

ItemSeparatorComponent={renderSeparator}

添加

ListFooterComponent={renderSeparator}