如何将ListFooterComponent粘贴到屏幕底部？ [英] How can I stick ListFooterComponent to the bottom of the screen?

问题描述

我有一个FlatList组件，由3个部分组成：

<View style={{ flex: 1 }}>
    <FlatList
        ListHeaderComponent={Comp1}
        ListFooterComponent={<Comp2 style={{ flexGrow: 1, justifyContent: 'flex-end' }}/>}
        renderItem={Comp3}
        contentContainerStyle={{ flexGrow: 1 }}
    />
</View>

默认情况下，如果data.length为0，则ListFooterComponent将紧跟在ListHeaderComponent之后呈现。 我需要始终在底部呈现它。

到目前为止，我发现的一个解决办法是为ListEmptyComponent提供空视图。在这种情况下，它看起来很好，直到我添加了至少一项-然后它再次粘在顶部。

是否可以默认将ListFooterComponent附加到底部？

蓝色是FlatList，红色是ListFooterComponent

推荐答案

如果需要始终位于屏幕底部，您可以在滚动视图中将单独的部分换行

  render() {

    return (
      <ScrollView style={{flex: 1}}>
        <Comp1/>
        <FlatList
          style={{flex: 1}}
          renderItem={Comp3}
        />
        <Comp2/>
      </ScrollView>
    );
  }

这篇关于如何将ListFooterComponent粘贴到屏幕底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！