<ListView> был официально объявлен устаревшим в React Native 0.48. Иногда мы игнорируем предупреждения об устаревании (виноват! 🙈) и не занимаемся проблемами, пока они не будут официально удалены. Сделайте себе одолжение и замените свои <ListView> прямо сейчас. Это просто, повысит производительность вашего приложения и очистит ваш код (Прочтите: Нет. Больше. DataSources!).

Мой <ListView> Компонент (Щенки! 🐶)

Вот простой компонент класса с именем <PuppyLitter>, который нам нужно будет обновить. Требуется два реквизита:

  1. puppies: Массив объектов, по одному на каждого щенка в помете. Например: [ {id: 1, name: 'Winky', age: 2}, {id: 2, name: 'Floofy', age: 1} ]
  2. getPuppies(): функция, извлекающая обновленный массив puppies.

Он отображает <ListView> полный <PuppyInfo> компонентов, по одному для каждого щенка в массиве. <PuppyInfo> будет отображать такие вещи, как имя и дата рождения щенка.

Наши возможности

<ListView> можно заменить любым из следующего:

  1. <FlatList>: компонент, отображающий список, например список компонентов.
  2. <SectionList>: То же, что <FlatList>, но с поддержкой разделов (подумайте о списке контактов с заголовками разделов, помеченных A, B, C ..)
  3. A <VirtualizedList>: Просто. Очень производительно. Отлично подходит для неизменяемых массивов. Не подходит для массива объектов с изменяющимися значениями свойств.

Для простоты я заменю <ListView> на <FlatList>. Мне не нужны разделы. Мне просто нужен список щенков. Однако список может измениться. Иногда я нерешителен и люблю переименовывать своих щенков.

Преобразование в ‹FlatList›

Во-первых, давайте изменим наш импорт:

// import { ListView, RefreshControl, View } from "react-native"
import { FlatList, RefreshControl, View } from "react-native"

Далее избавьтесь от всего этого.
Действительно. Больше никаких источников данных! 🗑

Давайте упростим наш renderRefreshControl() метод:

Наконец, обновите визуализированный компонент:

Несколько замечаний о ‹FlatList›

  • data заменяет вашу dataStore опору. Здесь вы передаете свой массив.
  • renderItem заменяет renderRow.
    ВАЖНО: renderItem передает элемент 🐶 из массива данных [🐶, 🐶, 🐶] внутри объекта. Ваш щенок будет значением свойства item в этом объекте: {item: 🐶}. Если вы хотите оставить свой renderRow() метод как есть, передайте вместо него item. Другой вариант:
renderItem={({item: puppy}) => this.renderRow(puppy)}
  • К каждому отображаемому элементу были добавлены ключи с помощью свойства keyExtractor. Мы будем использовать id объекта puppy.
  • Новая функция this.renderRefreshControl() должна быть привязана к компоненту в onRefresh
  • pageSize здесь не существует. Используйте initialNumToRender, чтобы передать домой много строк для рендеринга в исходном пакете (примерно сколько строк поместится на экране одновременно)

Мой последний компонент

Разве это не выглядит намного лучше?
Это тоже намного эффективнее! 🏁

👋 Привет! Я Джульетта. Я работаю в Eventric разработчиком программного обеспечения. Подпишитесь на меня в Твиттере на @Juliette.