React Native FlatList底部内容无法完整显示且无法滚动到底部求助

I see the problem—your FlatList can't scroll to show bottom posts because the root container isn't taking up the full screen height, which restricts the list's available space. Here's how to fix it:

Corrected Code #

import React, { Component } from 'react'
import { View, Text, FlatList } from 'react-native'
import BlockPhoto from '../ui/BlockPhoto';

interface Props { }
interface State { monTabPost: Array<TabPost> }
interface TabPost { id: number, title: string, }

const monTabPost: Array<TabPost> = [
 { id: 1, title: "Chat 1", },
 { id: 2, title: "Chat 2", },
 { id: 3, title: "Chat 3", },
 { id: 4, title: "Chat 4", },
 { id: 5, title: "Chat 5", },
 { id: 6, title: "Chat 6", },
 { id: 7, title: "Chat 7", },
 { id: 8, title: "Chat 8", },
]

export default class VueFlatList extends Component<Props, State> {
 state = { monTabPost: monTabPost ? monTabPost : [] }
 
 render = () => {
  return (
   // Add flex:1 to make root container fill entire screen height
   <View style={{ flex: 1, paddingHorizontal: 30 }}>
    <Text style={{ paddingVertical: 20, backgroundColor: "black", marginBottom: 5, color: "white", textTransform: "uppercase", textAlign: "center", fontWeight: "bold" }}>Mon titre</Text>
    {/* Add flex:1 to FlatList to take remaining space after header */}
    <FlatList 
     style={{ flex: 1 }}
     data={this.state.monTabPost}
     keyExtractor={item => item.id.toString()}
     renderItem={({ item }) => (
      <View>
       <Text>Mon post</Text>
       <BlockPhoto title={item.title} />
      </View>
     )}
    />
   </View>
  )
 }
}

Key Changes Explained #

• Root View flex:1: This ensures the container takes up the full height of the screen, providing enough space for the FlatList to expand beyond the initial visible area.
• FlatList flex:1: Makes the list occupy all remaining space after the header text, allowing it to scroll when content exceeds the screen's visible bounds.

If you later add bottom UI elements (like a tab bar), just add paddingBottom to the root View to prevent content from being hidden behind them.

内容的提问来源于stack exchange，提问作者Calaelen04