react-native - 如何将 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 之后立即呈现, 如果 data.length是 0。
我需要一直在底部渲染它。

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

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



蓝色是 FlatList ，红色 - ListFooterComponent

Answer 1

如果它需要一直在屏幕底部，你可以将单独的部分包裹在一个 ScrollView 中

  render() {

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