React Native Flatlist 最后数据不可见

Question

我在平面列表中渲染一些数据。我无法将所有数据滚动到底部。正如您在屏幕截图中看到的那样，某些数据是部分可见的。我无法进一步滚动，而且我还添加了我的代码。

请看截图

我的代码：

` 导出默认函数 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."
        }
    ]
);

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}
                style={styles.messageListContainer}
                initialNumToRender={data.length}
                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 样式 = StyleSheet.create({ 屏幕容器：{ 填充：10， 行间距：20 }, 消息容器：{ 边距顶部：30， }, 消息列表：{ 垂直填充：10， 弯曲收缩：1， 宽度：“100%” }, 消息列表容器：{ }, 输入： { 最大高度：100， 背景颜色：“浅灰色” }, 列表容器：{ 显示：“弯曲”， flexDirection: "行", justifyContent: "空间之间", 对齐项目：“居中”， 间隙：10， }, 信息： { 颜色：黑色”， }, 分隔符：{ 背景颜色：“浅灰色”， 高度：1， }, 动作容器：{ 行间距：5， }, })

`

Answer 1

尝试将

flexGrow: 1

添加到您的 messageListContainer，如下所示：

messageListContainer: { flexGrow: 1 }

这应该能让你的 FlatList 增长。