FlatList вытягивается из нижней части списка

Я использую компонент FlatList React-Native, который по умолчанию обновляется при вытягивании вверху списка.

<FlatList
    data={reviews}
    keyExtractor={item=> item.review_id}
    renderItem={({item}) => (
      <ReviewItem
        review = {item}
      />
    )}
    refreshing = {true}
    onRefresh = {refreshReviews}
    ItemSeparatorComponent={() => <ListSeperator />}
  />

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

Как я могу это сделать? Будет ли поведение одинаковым в iOS и Android?


ios react-native android react-native-flatlist
person Mateen-Hussain    schedule 11.11.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проверь это:

onEndReached={this.loadPosts.bind(this)}
onEndReachedThreshold={0}
ListFooterComponent={this.renderFooter(this.props.loading)}

полезны для загрузки следующего содержимого, когда список достигает конца.

ListFooterComponent показывает индикатор активности, чтобы сообщить пользователю, что что-то загружается

Если вы хотите показывать новый контент, когда пользователь доходит до конца, а затем тянуть, чтобы обновить, имхо, это не очень понятно для пользователя, как UX. Более очевидна загрузка нового содержимого с прокруткой вниз

person Ilario    schedule 13.11.2017
comment
да, я понимаю вашу точку зрения, автоматическая загрузка контента без необходимости тянуть дает лучший опыт. Но то же самое можно сказать и о вытягивании для обновления вверху списка. - person Mateen-Hussain; 13.11.2017
comment
@ user3434013 pull to Refresh был создан для загрузки нового контента, а не для загрузки старого контента... Например, если первое сообщение, которое я вижу, датировано 10 ноября, когда я вытягиваю для обновления, я ожидаю увидеть новые сообщения от 11 ноября и так далее. на. Когда я дойду до конца, я ожидаю найти все более старые сообщения от 9 ноября и так далее. - person Ilario; 13.11.2017