<ListView>
был официально объявлен устаревшим в React Native 0.48
. Иногда мы игнорируем предупреждения об устаревании (виноват! 🙈) и не занимаемся проблемами, пока они не будут официально удалены. Сделайте себе одолжение и замените свои <ListView>
прямо сейчас. Это просто, повысит производительность вашего приложения и очистит ваш код (Прочтите: Нет. Больше. DataSource
s!).
Мой <ListView>
Компонент (Щенки! 🐶)
Вот простой компонент класса с именем <PuppyLitter>
, который нам нужно будет обновить. Требуется два реквизита:
puppies
: Массив объектов, по одному на каждого щенка в помете. Например:[ {id: 1, name: 'Winky', age: 2}, {id: 2, name: 'Floofy', age: 1} ]
getPuppies()
: функция, извлекающая обновленный массивpuppies
.
Он отображает <ListView>
полный <PuppyInfo>
компонентов, по одному для каждого щенка в массиве. <PuppyInfo>
будет отображать такие вещи, как имя и дата рождения щенка.
Наши возможности
<ListView>
можно заменить любым из следующего:
<FlatList>
: компонент, отображающий список, например список компонентов.<SectionList>
: То же, что<FlatList>
, но с поддержкой разделов (подумайте о списке контактов с заголовками разделов, помеченныхA
,B
,C
..)- 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.