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为0，则ListHeaderComponent将在data.length之后立即呈现。我需要一直在底部渲染它。

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

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

蓝色是FlatList，红色是ListFooterComponent

Answer 1

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

  render() {

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

Answer 2

在重新设置View之前，一个好主意是根据屏幕大小设置高度。像这样：

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

视图如下：

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

在视图中添加位置：“相对” ：

<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 中使用的容器的 View

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

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

3 个答案: