React Native FlatList - проблема с видимостью последнего элемента

Установите нижний отступ для контейнера содержимого <FlatList>:

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

Добавьте {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;

@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'

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

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

В response-navigation есть SafeAreaView с возможностью не отображать эту нижнюю область.

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

Просто оберните его в представление с помощью flex: 1

<ParentView style={{flex:1}
    <View style={{flex:1}}>
    // Your flatlist
    <View>
</ParentView>

Также обратите внимание, что каждый родительский элемент этого «View», в который заключен Flatlist, также должен быть View с Flex 1. В противном случае ваш плоский список не будет виден.

использовать contentContainerStyle свойства FlatList

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

Вы можете попробовать это решение

Для Vertical FlatList:

<FlatList
 ListFooterComponent={<View />}
 ListFooterComponentStyle={{height:200}}
/>

Для Horizontal FlatList:

<FlatList
  contentContainerStyle={{paddingRight:40}}
/>

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

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

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

Используйте свойство contentContainerStyle в плоском списке <FlatList contentContainerStyle={{paddingBottom: 10}} />

Я видел ту же проблему в нашем гибридном приложении Android + iOS React Native. Мы встраиваем компонент FlatList в наши собственные пользовательские интерфейсы внутри фрагмента в Android, и нам не удалось выполнить прокрутку до последнего элемента в списке, хотя индикатор прокрутки показывал, что прокручивать нужно больше, ScrollView просто не прокручивается дальше. Я безуспешно пробовал все комбинации использования упаковки <View style={{flex:1}}> для обертывания FlatList, а также использования contentContainerStyle={{flexGrow:1}} в FlatList. В поисках подсказки выяснилось, что FlatList нуждается в абсолютной, предопределенной высоте на Android, чтобы можно было прокручивать вниз - он отлично работает на iOS, но на Android использование match_parent не сработает. Поскольку нам необходимо поддерживать все типы устройств, включая телефоны и планшеты, невозможно было заранее определить абсолютную высоту.

Чтобы исправить это, я создал собственный подкласс FrameLayout для размещения фрагмента ReactRootView, который переопределяет onLayout() для игнорирования измерений дочернего представления, заставляя представления иметь точные размеры FrameLayout, примерно как в Kotlin:

class StretchFrameLayout @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        for (child in children){
            if (child.visibility == View.GONE) continue
            child.updateLayoutParams {
                this.width = measuredWidth
                this.height = measuredHeight
            }
            if (needsRelayout){
                handler.postDelayed({child.requestLayout()},1)
            }
        }
        super.onLayout(changed, left, top, right, bottom)
    }
}

Это сработало для меня.

<View style={{flex: 1}}>
    <FlatList
      style={{flex: 1}}
      data={data}
      renderItem={({item}) => (
        <ListItem item={item} onPress={() => handlePress(item)} />
      )}
    />
  </View>

Очень хорошо работает для меня

<FlatList
  data={data}
  contentContainerStyle={{ paddingBottom: 30 }}
  style={{height: '95%'}}
  renderItem={({ item, index }) => (
    <ListItem item={item} onPress={() => handlePress(item, index)} />
  )}
/>

Это очень хорошо работает в моем случае:

  <FlatList
    data={todos}
    contentContainerStyle={{ height: '100%' }}
    renderItem={({ item }) => <Todos items={item} pressed={pressed} />}
  />

Я решил, что это contentInset={{ bottom: data.length * itemStyle.height, }} с itemStyle.height, когда 50 работает нормально.