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。

Answer 2

可以将渲染替换为可以使用的渲染，

render = () => {
    return (
        <View style={{ paddingHorizontal: 30, flex: 1, width: '100%' }}>
            <Text style={{ paddingVertical: 20, backgroundColor: "black", marginBottom: 5, color: "white", textTransform: "uppercase", textAlign: "center", fontWeight: "bold" }}>Mon titre</Text>
            <FlatList
                data={this.state.monTabPost}
                keyExtractor={item => item.id.toString()}
                renderItem={({ item }) =>
                    <View>
                        <Text>Mon post</Text>
                        <BlockPhoto title={item.title} />
                    </View>
                }
            />
        </View>
    )
}

您必须在主容器视图中添加一些样式，然后flex占据整个数据列表。

Answer 3

我尝试使用 paddingBottom，但它对我不起作用。

尝试在 Flatlist 组件的样式上添加 marginBottom: 150。

React Native Flatlist无法看到该列表的底部

3 个答案: