Как да използвате компонента FlatList - Реагирайте основни принципи

Имаше доста начини за създаване на превъртащ списък в React Native, най-вече това са ScrollView и ListView. Всеки има своите силни и слаби страни. От v0.43 на React Native имахме достъп до два нови изгледа на списъци, FlatList и SectionList. Днес ще разгледаме как да използваме компонента FlatList.

Какво е?

Какво е компонентът FlatList? Това е лесен начин да направите ефикасен превъртащ се списък с данни. Не само че е ефикасен, но и има невероятно прост API за работа. Ако сте използвали или сте запознати с компонента на ListView, той е много подобен, просто по-добре във (почти) всеки начин. Вече не е нужно да форматирате данните - можете просто да ги предадете масив от данни и да стигнете до визуализация веднага.

Предпочитате видео? Вижте този урок в YouTube и се абонирайте, докато сте там!

Основна употреба

Има два основни реквизита, за които трябва да знаете в FlatList и това са данни и renderItem. Първият е масив от данни, използван за създаване на списъка, обикновено масив от обекти, а вторият е функцията, която ще вземе отделен елемент от масива от данни и ще представи компонент за него.

Данните ще идват от API на Random User Generator и за интерфейса ще се използват React Native Elements.

Пълният изходен код е достъпен на GitHub.

В котела на този урок приложението ще направи заявка към API за произволен потребител и ще съхранява отговора от това в състояние на компонент. Разгледайте кода по-долу, за да го разберете.

Ще насочите и файловете index.ios.js и index.android.js, за да препратите към файла, създаден от FlatListDemo.js.

С това завършено можете да продължите и реално да започнете да изобразявате данните. За целта първото нещо, което искате да направите, е да импортирате {List, ListItem} от "react-native-elements"; така че имате необходимите компоненти за рендиране на данните. Останалата част от работата ще се извърши по метода на изобразяване. Първо скеле:

Сега трябва да предадете масив от данни на FlatList чрез опора за данни. Това е на разположение в this.state.data.

След това искате да рендерирате съдържанието с рендерItem опора. Функцията се предава един аргумент, който е обект. Данните, които ви интересуват, са на клавиша за елемент, така че можете да използвате унищожаване за достъп до тях от функцията. След това върнете компонент, използвайки тези данни.

Сега при стартиране на приложението и след като изчакате около секунда за отговор от сървъра, трябва да видите нещо подобно (точните данни може да са малко по-различни).

Забелязвате тази грешка отдолу? Това е предупреждение, че в елементите на списъка липсват ключове. Тези уникални ключове са това, което позволява на VirtualizedList (което е построено върху FlatList) да проследява елементи и помощни средства за ефективността на списъка. Няма да се гмурна в него, но просто знам, че е важно.

За да облекчите този проблем, искате да изберете част от данните, която е уникална за всеки елемент. В този случай можете да използвате имейл адреса на потребителя, тъй като това ще бъде уникално за всеки елемент. След това можете да използвате опора keyExtractor, за да определите кой част от данните трябва да се използва като ключ.

Сега предупреждението вече не се появява.

Няма повече грешка!

сепаратор

Нека да кажем, че нямате разделители, които вече са в приложението ви, и искате, но не искате да ги показвате в горната или долната част на списъка. Можете да добавите borderBottom на всеки елемент, с изключение на последния ... или можете да използвате опората ItemSeparatorComponent, която ще се погрижи за цялата логика за вас.

За този пример първото нещо, което трябва да направите, е да премахнете всички граници в приложението.

След това искате да създадете компонента на разделителя. Много е просто, но вместо да бъде цялата ширина на екрана, той (приблизително) ще започне от текста.

и след това можете да продължите напред и да го използвате, като просто добавите ItemSeparatorComponent = {this.renderSeparator} към компонента FlatList.

Оставям ви с нещо подобно. Забележете, че в горната и долната част на списъка разделителят не се изобразява.

удар с глава

Предаването на компонент в горната част на списъка, който се превърта далеч със съдържанието, докато превъртате надолу по списъка, е също толкова лесно, колкото добавянето на разделителя. За да постигнете това, ще използвате компонента SearchBar от React Native Elements.

Първо създайте нова функция, която представя компонента, който искате в заглавката.

След това искате действително да направите това заглавие, като използвате опората ListHeaderComponent в FlatList.

Оставяйки ви със следното…

Footer

Подножието е почти същото като Header, само че е в края на списъка, а не в началото. Този футър ще бъде малко по-сложен от предишния пример (настройката му за безкрайно превъртане), но важат същите принципи. Първо създайте метод за извикване на долния колонтитул и връщане на компонент.

След това извикайте тази функция от ListFooterComponent.

Това ви оставя с нещо подобно (коригирах малко кода, за да се уверя, че можете да видите ActivityIndicator).

Издърпайте за Опресняване

Безкрайно превъртане

Надявам се да ви е харесало този урок! Ако се интересувате от изграждането на първото си приложение React Native или втвърдяването на вашите основни знания, проверете безплатния ми курс React Native!