react-native - React Native Flatlist 看不到 flatlist 的底部

Question

我想显示一个平面列表，但我有一个问题。在手机底部，我无法显示帖子的完整性，也不要滚动到它。我不知道为什么。有些问题？我尝试了一些有风格的间距东西，但这不像我想要的那样工作。

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

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 (
        <View style={{ paddingHorizontal: 30 }}>
            <Text style={{ paddingVertical: 20, backgroundColor: "black", marginBottom: 5, color: "white", textTransform: "uppercase", textAlign: "center", fontWeight: "bold" }}>Mon titre</Text>
            <FlatList
                //inverted
                data={this.state.monTabPost}
                keyExtractor={item => item.id.toString()}
                renderItem={({ item }) =>
                    <View>
                        <Text>Mon post</Text>
                        <BlockPhoto title={item.title} />
                    </View>
                }
            />
        </View>
    )
}

}

Answer 1

添加 contentContainerStyle={{ paddingBottom: 100 // <-- you can calibrate this }}在 Flatlist成分。