React Native Flatlist не может видеть дно плоского списка - PullRequest
Новая
       4

React Native Flatlist не может видеть дно плоского списка

1 голос
/ 09 июня 2019

Я хочу показать плоский список, но у меня есть проблема. В нижней части телефона я не могу показать целостность поста и не прокручиваю до него. Я не знаю почему. Некоторые вопросы ? Я пробовал кое-что со стилем, но это не работает, как я хочу. 

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>
    )
}

}

Ответы [ 2 ]

1 голос
/ 10 июня 2019

может заменить ваш рендер, ниже он будет работать, 

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 занимать все списки данных.

0 голосов
/ 09 июня 2019

Добавить contentContainerStyle={{ paddingBottom: 100 // <-- you can calibrate this }} на Flatlist компонент.

...