如何将 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>

默认情况下，如果 data.length 为 0，ListFooterComponent 将在 ListHeaderComponent 之后立即呈现。我需要一直在底部渲染它。

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

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

蓝色是FlatList，红色是-ListFooterComponent

Answer 1

如果需要始终在屏幕底部，可以将单独的部分包裹在 ScrollView 中

  render() {

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

Answer 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>
  )

Answer 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>
    )}
/>

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

How can I stick ListFooterComponent to the bottom of the screen?

react-native

react-native-flatlist