React Native FlatList底部数据无法完全显示问题求助

我在React Native中使用FlatList渲染数据时遇到问题——无法滚动至底部查看全部内容，部分数据仅能显示一部分。

我的代码： #

import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function Home() {
    const [data, setData] = useState(
        [
            {
                "id": 1,
                "label": "This is the label for item 1.\nIt continues on the second line."
            },
            {
                "id": 2,
                "label": "This is the label for item 2.\nIt continues on the second line."
            },
            {
                "id": 3,
                "label": "This is the label for item 3.\nIt goes to the second line\nand even a third line."
            },
            {
                "id": 4,
                "label": "This is the label for item 4.\nSecond line."
            },
            {
                "id": 5,
                "label": "This is the label for item 5.\nSecond line\nThird line."
            },
            {
                "id": 6,
                "label": "This is the label for item 6.\nAnother second line."
            },
            {
                "id": 7,
                "label": "This is the label for item 7.\nSecond line, third line."
            },
            {
                "id": 8,
                "label": "This is the label for item 8.\nSecond line."
            },
            {
                "id": 9,
                "label": "This is the label for item 9.\nAnother second line."
            },
            {
                "id": 10,
                "label": "This is the label for item 10.\nAnd it continues\nonto a third line."
            }
        ]
    );
    const [notes, setNotes] = useState('');
    const [idSaver, setIdSaver] = useState(null);

    const handleAdd = () => {
        const newItem = {
            id: Date.now(),
            label: notes
        };
        setData([...data, newItem]);
        setNotes('');
    };

    const handleCancel = () => {
        setNotes('');
    };

    const handleEdit = (label) => {
        setNotes(label);
    };

    const handleRemove = (id) => {
        setData(data.filter(item => item.id !== id));
    };

    return (
        <>
            <View style={styles.screenContainer}>
                <TextInput
                    multiline
                    numberOfLines={4}
                    style={styles.input}
                    value={notes}
                    placeholder='Type a note..'
                    onChangeText={(text) => setNotes(text)}
                />

                <View style={styles.actionContainer}>
                    <Button title='Add' onPress={() => handleAdd()} />
                    {notes.length > 0 && <Button title='Cancel' onPress={() => handleCancel()} />}
                </View>

                {data.length > 0 && <FlatList
                    data={data}
                    keyExtractor={item => item.id.toString()}
                    style={styles.messageListContainer}
                    renderItem={(item) => (
                        <>
                            <View style={styles.listingContainer}>
                                <TouchableOpacity style={styles.messageList} onPress={() => [
                                    setIdSaver(item.item.id),
                                    handleEdit(item.item.label)]}>
                                    <View>
                                        <Text
                                            multiline
                                            numberOfLines={2}
                                            style={styles.message}>{item.item.label}</Text>
                                    </View>
                                </TouchableOpacity>
                                <View>
                                    <Button title='X'
                                        onPress={() => handleRemove(item.item.id)} />
                                </View>
                            </View>
                        </>
                    )}
                    ItemSeparatorComponent={() => <View style={styles.seperator} />}>
                </FlatList>}
            </View>
        </>
    )
}

const styles = StyleSheet.create({
    screenContainer: {
        padding: 10,
        rowGap: 20,
        flex: 1
    },
    messageContainer: {
        marginTop: 30,
    },
    messageList: {
        paddingVertical: 10,
        flexShrink: 1,
        width: "100%"
    },
    messageListContainer: {
        flex: 1
    },
    input: {
        maxHeight: 100,
        backgroundColor: "lightgrey"
    },
    listingContainer: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "flex-start",
        gap: 10,
    },
    message: {
        color: "black",
    },
    seperator: {
        backgroundColor: "lightgrey",
        height: 1,
    },
    actionContainer: {
        rowGap: 5,
    },
})

问题解决要点： #

• 容器布局约束：给screenContainer和messageListContainer添加flex:1，确保FlatList能获取足够的滚动空间，避免父容器被内容撑开导致滚动区域不足
• 移除全量渲染：删掉initialNumToRender={data.length}，FlatList默认的按需渲染机制更高效，也能避免一次性渲染所有项导致的滚动计算错误
• 对齐方式调整：将listingContainer的alignItems从center改为flex-start，确保多行文本的项高度正确计算，不会出现内容截断或滚动异常

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