ReactNative ListView устанавливает начальную позицию прокрутки после загрузки данных

javascript react-native react-native-listview react-native-scrollview

4247 просмотра

1 ответ

9319 Репутация автора

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

Чтобы перейти к конкретным датам, я попытался сохранить их y позиции в состоянии.

renderSectionHeader= (sectionData, sectionID) => (
      <View
        onLayout={(event) => {
          const { y } = event.nativeEvent.layout;
          const sectionPosition = { [sectionID]: y };
          const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition);
          this.setState({ sectionPositions });
        }}
       ...

Однако у меня возникли проблемы с этим подходом, так как renderSectionHeader не вызывается для элементов, которые находятся ниже по списку (из-за ленивого рендеринга).

Затем я попытался вычислить позицию математически, но тогда это заставляет рендеринг каждого раздела показываться на экране, когда он приближается к заданной дате.

Есть ли способ достичь того, что мне нужно?

СВЯЗАННЫЙ

Реагировать на собственный ListView: Как прокрутить до определенной строки

https://github.com/facebook/react-native/issues/499

ОБНОВИТЬ

В моем приложении я знаю, что все строки имеют одинаковую высоту.

Использование, contentOffset={{ y: offsetY }}а setScrollне не работает, так как он все еще должен отрендерить все элементы до данного элемента для работы.

Использование initialListSize={99999999}работает, но делает страницу очень медленной, и я предупрежден против ее использования.

ОБНОВЛЕНИЕ 2

Можно ли предоставить исходное содержимое в источник данных, а затем обновить данные, чтобы добавить дополнительные элементы до и после элементов, которые в данный момент находятся на экране?

Или есть библиотека, которую я не нашел, которая делает то, что мне нужно?

Автор: Tom Источник Размещён: 18.07.2016 11:13

Ответы (1)


6 плюса

9319 Репутация автора

Решение

Похоже, что это скоро может быть решено с помощью FlatList, который в настоящее время находится в экспериментальной папке в репозитории React-Native.

https://github.com/facebook/react-native/blob/a3457486e39dc752799b1103ebe606224a8e8d32/Libraries/Experimental/FlatList.js

Лучший ListView - FlatList Резюме: нам действительно нужно лучшее представление списка - вот оно!

Основные отличия от существующих ListView:

  • Элементы «виртуализируются» для ограничения памяти, то есть элементы вне окна рендеринга отключаются и их память освобождается. Это означает, что состояние экземпляра не сохраняется, когда элементы прокручиваются из окна рендеринга.
  • Нет DataSource- просто dataопора формы Array<any>. По умолчанию, они должны иметь форму , {key: string}но пользовательские rowExtractorфункции могут быть предусмотрены различные формы, например graphql данные , где вы хотите отобразить idв key. Обратите внимание, что основа VirtualizedListгораздо более гибкая.
  • Необычные scrollToфункциональные возможности : scrollToEnd, scrollToIndexи scrollToItemв дополнение к нормали scrollToOffset.
  • Встроенная поддержка для обновления - установите набор onRefreshи refreshingреквизит.
  • Рендеринг дополнительных строк обычно выполняется с низким приоритетом после завершения любых взаимодействий / анимаций, если только у нас не закончится визуализированный контент. Это должно помочь приложениям чувствовать себя более отзывчивыми.
  • Компонент реквизит заменяет функции рендеринга, например, ItemComponent: ReactClass<{item: Item, index: number}>заменяетrenderRow: (...) => React.Element<*>
  • Поддерживает динамические элементы автоматически с помощью onLayoutили getItemLayoutможет быть предоставлено для повышения производительности, а также сглаживания scrollToIndexи прокрутки.
  • Обратный вызов видимости заменен более мощным обратным вызовом видимости и работает в вертикальном и горизонтальном режимах как минимум на Android и iOS, но, вероятно, и на других платформах. Дополнительная мощность исходит от того, viewablePercentThresholdчто позволяет клиенту решить, когда элемент следует считать видимым.

Демо-версия:

введите описание изображения здесь

Автор: Tom Размещён: 09.02.2017 04:39
Вопросы из категории :
32x32