React Native FlatList Pagination не работает - onEndReached не запускается

Я использую компонент FlatList для реагирования на список элементов. Разбивка на страницы не происходит должным образом, согласно документации onEndReached должен запускаться при достижении конца страницы, в настоящее время я пытался изменить значения для onEndReachedThreshold (пробовал 0.1, 1.0, 0.5, 0.01), я также устанавливаю флаг обновления. Примечание. Я использую ReactNative 0.48.4. Вот мой код.

<Container style={{ marginTop: 22 }}>
      <Content
        style={{ flex: 1 }}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        <View style={{ flex: 1 }}>
          <FlatList
            initialNumToRender={10}
            refreshing={this.state.refreshing}
            onEndReachedThreshold={0.5}
            onEndReached={({ distanceFromEnd }) => {
              console.log('on end reached ', distanceFromEnd);
            }}
            data={this.props.messages}
            renderItem={this.notificationContent.bind(this)}
            keyExtractor={(item) => item._id}
          />
        </View>
      </Content>
    </Container>

Я уже испробовал все возможные решения, чтобы дать ответы на проблемы с github

Здесь есть помощь?


react-native react-native-flatlist
person Sadanand    schedule 12.02.2018    source источник
comment
Ваш Content стиль компонента flexGrow может делать некоторые странные вещи с плоским списком.   -  person Dyo    schedule 12.02.2018
comment
onEndReachedThreshold = {0.5} удалите эту строку и убедитесь, что она точно будет работать.   -  person Vishnu Magar    schedule 11.01.2019

Ответы (4)


arrow_upward
10
arrow_downward

Вы используете NativeBase в своем проекте, а Flatlist находится в Content, они конфликтуют. Чтобы решить эту проблему, вам необходимо удалить Content

person Hao Le    schedule 21.05.2018
comment
В общем, наличие FlatList внутри любого ScrollView может вызвать проблемы - person Gautham Kumaran; 16.12.2018
comment
наличие FlatList в представлении SafeArea вызвало проблему на Android - person Fabrizio Bertoglio; 02.05.2019

arrow_upward
4
arrow_downward

То же самое происходит и со мной: вам нужно добавить contentContainerStyle = {flex: 1}

<Content contentContainerStyle={{ flex: 1 }}>
person arahmanali    schedule 26.06.2019

arrow_upward
0
arrow_downward

Передайте свойство extraData в FlatList, поскольку extraData = {this.state} см. документы для получения дополнительной информации.

person Isaac Sekamatte    schedule 12.02.2018
comment
Мне нужно получить дополнительные данные, когда пользователь прокручивает до конца (получение следующей страницы), этот ответ предназначен для другой цели. - person Sadanand; 12.02.2018
comment
Я понял ваш запрос, я использую FlatList в одном из своих приложений, чтобы вы повторно визуализировали FlatList, вам нужно передать this.state в extraData, а затем передать новый набор данных в data, чтобы он работал. В противном случае, если вы продолжите передавать только новые наборы данных, вы ничего не увидите, как вы видели. См. Документацию. - person Isaac Sekamatte; 12.02.2018
comment
Где новые данные? когда получить новые данные? Мне нужно вызвать API, чтобы получить новые данные, когда вызывать API? когда пользователь прокручивает список до конца, мне нужно позвонить. все требование состоит в том, чтобы получить новые данные. так что, вероятно, ваш случай другой - person Sadanand; 12.02.2018
comment
Это мое предположение или, скорее, то, что я ожидал, когда срабатывает onEndReached, вы вызываете this.props.messages, который, как я предполагаю, является объектом массива state родительского класса, и там вы отправляете больше сообщений объекту. Но FlastList расширяет PureComponent и не будет просто повторно выполнять рендеринг при изменении состояния, поэтому вы передаете this.state родительского компонента в extraData как this.props.someVariableHolding"this.State", это приведет к перезагрузке и повторному рендерингу FlatList. - person Isaac Sekamatte; 12.02.2018
comment
вы не получаете мой вопрос, моя проблема в том, что onEndReached сам по себе не запускается, если это срабатывает, моя проблема решена. Пожалуйста, прочтите мою формулировку проблемы еще раз, также в заголовке моего вопроса четко указано, что onEndReached не запускается - person Sadanand; 12.02.2018
comment
onEndReached не сработал и в моем случае. Но установка extraData = {this.state} сработала, и onEndReached также начинает срабатывать. - person beck; 05.09.2018
comment
Установка extraData={this.state} меня ничего не исправила. - person Yokhen; 22.04.2019

arrow_upward

arrow_downward

person    schedule
comment
И как вы ожидаете вызвать onEndReached? Также по умолчанию установлено onEndReachedThreshold. - person msqar; 09.08.2019