如何将 ListFooterComponent 粘贴到屏幕底部？

Question

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

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

默认情况下，ListFooterComponent会在ListHeaderComponent, ifdata.length为 0 之后渲染。我需要始终将其渲染在底部。

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

可以ListFooterComponent默认贴在​​底部吗？

蓝色是FlatList，红色是 -ListFooterComponent

Answer 1

如果它需要始终位于屏幕底部，您可以将单独的部分包装在 ScrollView 中

  render() {

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