Реагировать на актуальность

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

 renderProducts() {
        if (this.props.loading === true) {
            return (
                <View style={Styles.spinnerStyle}>
                    <ActivityIndicator size='large' />
                </View>
            );
        }

        return (
                <FlatList
                    data={this.props.myProducts}
                    keyExtractor={(item) => item.id}
                    renderItem={({ item }) => (
                        <Card 
                            title={item.title} 
                            image={{ 
                                uri: item.image !== null ? item.image.src :'../resImage.jpg' 
                            }}
                        >
                            <Text style={{ marginBottom: 10 }}>
                                {item.body_html}
                            </Text>
                            <Button
                                icon={{ name: 'code' }}
                                backgroundColor='#03A9F4'
                                fontFamily='Lato'
                                buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }}
                                title='VIEW NOW' 
                            />
                      </Card>
                      )}
                />
        );
    }

    render() {
        return (
            <View>
                <View style={Styles.viewStyle}>
                    <Text style    {Styles.textStyle}>ProductsList</Text>
                </View>
                    { 
                        this.renderProducts() 
                    }
            </View>
        );
    }

Ответ 1

Добавьте {flex: 1} в тег View, в котором размещен компонент Flatlist.

В моем случае

const App = () => {
  return (
    <Provider store={createStore(reducers)}>
    <View style={{ flex: 1 }}>
      <Header headerText={'My App'} />
      <ScreenTabs /> // this is my content with FlatList 
    </View>
    </Provider>
  );
};

export default App;

Ответ 2

Установить нижнее поле

 <FlatList

 contentContainerStyle={{ paddingBottom: 20}}

 />

Ответ 3

@Christian (я не могу комментировать, потому что моя репутация слишком низкая) вы не можете видеть свой список с помощью flex: 1, потому что flex: 1 превратит компонент в родительский. Если у родителя нет flex: 1, он не растянется до своего родителя или экрана. Имейте в виду, однако, что flex: 1 с SafeAreaView покажет нижнюю безопасную область. Это будет выглядеть плохо, если ваш SafeAreaView backgroundColor отличается по цвету от фона вашего списка.

Мой старый обходной путь заключался в добавлении элемента в конец массива элементов, но я все еще изучаю, как прокрутить мимо/ниже нижнего поля безопасной области с помощью FlatList (именно так я и нашел этот пост для начала).

Обновление: используя ListFooterComponent, вы можете создать даже простой белый "нижний колонтитул" с высотой и/или полем

Например (я бы не стал напрямую копировать и вставлять это, если бы вы были на вашем месте... наверняка есть лучший способ обнаружить iPhone без рамки, особенно в 2019 году, когда у нас их больше одного)

ListFooterComponent={<View style={{ height: 0, marginBottom: 90 }}></View>}

Вот как бы я это сделал, используя сейчас высоту iPhoneX. Но это не перспектива на будущее, так как условия должны будут обновляться каждый раз, когда выходит новый iPhone без рамок:

ListFooterComponent={<View style={{ height: 0, marginBottom: noBezels ? 90 : 0 }}></View>}

Или у вас всегда может быть небольшой интервал внизу, например, загрузочный GIF, сообщение... что угодно.

ОБНОВИТЬ

Я узнал о response-native-device-info, которая имеет метод hasNotch(). Я считаю, что это полезно для стилей для iPhone без рамок, комбинируя hasNotch() с Platform.OS === 'ios'

ОБНОВЛЕНИЕ (снова) *

Я знаю, что это не по теме, но...

Реактивная навигация имеет SafeAreaView с возможностью не показывать эту нижнюю область.

import { SafeAreaView } from 'react-navigation';
<SafeAreaView forceInset={{ bottom: 'never' }} />

Ответ 4

использовать contentContainerStyle реквизиты FlatList

<FlatList contentContainerStyle={{ paddingBottom: 20}} />

Ответ 5

Для проблем IOS вы можете применить некоторые специфические реквизиты IOS:

<FlatList
  // ...
  contentInset={{top: 0, bottom: 20, left: 0, right: 0}}
  contentInsetAdjustmentBehavior="automatic"
  // ...  
/>

Решение с наполнением contentContainerStyle не кажется лучшим для решения проблем IOS в безопасной области.