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

【问题标题】：How can I stick ListFooterComponent to the bottom of the screen?如何将 ListFooterComponent 粘贴到屏幕底部？
【发布时间】：2021-11-30 10:12:58
【问题描述】：

我有一个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 提供一个空视图。在这种情况下，它看起来很好，直到我添加至少一项 - 然后它再次粘在顶部。

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

蓝色是FlatList，红色是ListFooterComponent

【问题讨论】：

另一种解决方法是将您的 FlatList 呈现为 flex:1，但不是直接在其上。您可以使用flex:1 将您的FlatList 包装在一个视图中，然后将contentContainerStyle={{ flexGrow: 1 }} 作为道具传递给FlatList。这符合您的要求吗？
现在看起来实际上是这样 :) FlatList 的大小看起来很完美，唯一有问题的是 ListFooterComponent。我将更新代码以获得更好的清晰度
好的，我刚刚了解您的问题，抱歉，我会想办法解决

标签： react-native react-native-flatlist

【解决方案1】：

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

  render() {

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

【讨论】：

是的，这是一个选项，但在这种情况下，当 contentSize 大于 size 时，它不会随着视图的其余部分滚动。我希望这仍然发生。有意义吗？
确实是这样，我看看能不能想出办法
我找到了解决方案。我将Comp1、FlatList 和Comp2 包裹在scrollView 内。如果你明白了 - 只需重写你的答案，我会接受它:)
啊，好主意！但我不想把自己没有想出的答案归功于自己 ;-)
@Milore 它有效，我一直在使用它。 FlatList 的 scrollEnabled 属性在 ScrollView 内时可以设置为 false

【解决方案2】：

在重新设计您的视图之前，一个好主意是根据屏幕大小设置您的高度。比如：

const {height} = Dimensions.get ('window');

视图如下所示：

<View style = {{flex: 1, height: height}}>

将位置：'relative'添加到视图中：

<View style = {{flex: 1, height: height, position: 'relative'}}>

然后将 ListFooterComponentStyle 添加到 FlatList：

    ListFooterComponentStyle = {{
    backgroundColor: '# ccc',
    position: 'absolute,
    width: '100%',
    bottom: 0
}}

展示一个完整的例子功能组件：

const {height} = Dimensions.get('window'); //capture the screen size

  return (
  <SafeAreaView style={{flex:1,height:height,backgroundColor:'#f5f5f5', position:'relative'}}>
  <FlatList 
        data = {YOUR_DATA}
        renderItem = {renderItem}
        keyExtractor = {item => item.idItem}
        numColumns = {2} // Divide list items into 2 columns (optional)
        onEndReached = {LOAD_MORE_DATA}
        onEndReachedThreshold = {0.1} //0.1 = 10%
        ListFooterComponent = {YOUR_COMPONENT_FOOTER}
        ListFooterComponentStyle={{
          backgroundColor:'#ccc', 
          position:'absolute',
          width:'100%', 
          bottom:0
        }}
      />
  </SafeAreaView>
  )

【讨论】：

【解决方案3】：

将 flexGrow: 1 添加到 Flatlist 的 contentContainerStyle 将 flexGrow: 1 添加到 Flatlist 的 ListFooterComponentStyle 将 flex: 1 和 justifyContent: "flex-end" 添加到 ListFooterComponent 中使用的容器的视图

<FlatList 
    contentContainerStyle = {{flexGrow: 1}}
    listFooterComponentStyle = {{flexGrow: 1}}
    listFooterComponent = {()=>(
           <View style={{
               flex:1,
               justifyContent: "flex-end"
           }}>
               ...Component you want at bottom
           </View>
    )}
/>

【讨论】：