Управление элементами в FlatList
Вы, наверное, слышали о Flatlist компоненте, если работаете в React native и обрабатываете списки различных клиентских данных и деталей либо из API, либо из полей формы. По сути, Flatlist - это базовый компонент, предназначенный для эффективного отображения вертикально прокручиваемых списков изменяющихся данных. Это компонент, который появился в React native после версии 0.43. Он заменил компонент ListView и упростил разработчикам работу со списками.
Что такое Flatlist? И как мы можем использовать его для отображения динамических или статических списков?
FlatList - простой компонент, введенный для снятия ограничений компонента ListView. Основные свойства, необходимые для обработки Flatlist, - это data и renderItem . Для простоты data представляет собой простой массив, тогда как renderItem отображает этот массив данных и предоставляет разработчику метаданные, например index и т. д.
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.key}</Text>
/>
Использование FlatList для отображения списка элементов
Если вы новичок в React Native, я бы порекомендовал вам прочитать эту статью и попытаться изучить базовую структуру. Затем вернитесь, чтобы лучше понять FlatList
Вот пошаговое руководство по использованию FlatList для извлечения данных из фиктивного API и их использования для отображения списка элементов с изображением.
Первый шаг - импортировать компонент Flatlist из библиотеки react-native.
import { FlatList } from "react-native";
Теперь, когда мы импортировали компонент, пришло время использовать этот компонент в render функции.
<FlatList
data={this.state.dataSource}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={item => this.renderItem(item)}
keyExtractor={item => item.id.toString()}
/>
Указывает на размышление
dataprop берет данные из{this.state.dataSource}и предоставляет нам массив объектов.ItemSeparatorComponentпомогает разделять элементы списка при отображении в списке.renderItemметод - самая важная частьFlatList. Он отображает данные массива таким образом, чтобы его можно было разработать в соответствии с требованиями к данным и дизайну.- Поскольку здесь мы имеем дело с массивом,
keyExtractorprop предоставляет уникальный ключ для обработки элемента списка отдельно по мере необходимости. - Есть еще одна важная опора под названием
extraData, которую я опишу позже в этой статье.
Теперь у вас есть базовое представление о том, как работает Flatlist. Пришло время воплотить эти знания и логику в коде. Поскольку мы используем данные из API, я бы добавил индикатор для отображения загрузчика до тех пор, пока данные не загрузятся в бэкэнде. Пришло время получить данные и отобразить их в списке. Если вы хотите узнать больше о получении данных из API, вы можете прочитать эту статью.
До сих пор мы использовали data и renderItem методы. Пришло время изучить оставшиеся методы.
FlatListItemSeparator = () => <View style={styles.line} />;
Вы можете указать стиль в соответствии с вашим дизайном и изменить этот класс стиля. Если вы хотите использовать мою версию стиля, вы можете найти код, который я использовал, в конце этой статьи.
Теперь метод key extractor в основном предназначен для уникального идентификатора элементов. Для обработки предупреждений лучше использовать приведенный выше точный код.
Теперь самое интересное
В какой-то момент вам нужно будет выбрать несколько элементов в списке и выделить их. Это особенно актуально для маркетинговых приложений или списков дел, где вам нужно выбирать из сотен элементов в списке. Вот код для выбора элемента среди различных других элементов.
selectItem = data => {
data.item.isSelect = !data.item.isSelect;
data.item.selectedClass = data.item.isSelect
? styles.selected: styles.list;
const index = this.state.dataSource.findIndex(
item => data.item.id === item.id
);
this.state.dataSource[index] = data.item;
this.setState({
dataSource: this.state.dataSource
});
};
У нас есть экран с выбранными элементами, выделенными ярким цветом, тогда как для других элементов в списке установлен стиль по умолчанию. Чтобы понять логику более четко, давайте рассмотрим компонент выборки.
.then(responseJson => {
responseJson = responseJson.map(item => {
item.isSelect = false;
item.selectedClass = styles.list;
return item;
});
Здесь мы назначили item.isSelect as false и selectedClass назначили класс стиля по умолчанию с именем list.. Причина этого заключается в том, что теперь каждый элемент в нашем списке будет иметь эти два реквизита, которые можно использовать для однозначной выборки элемента. и манипулировать им. Теперь в нашей функции selectItem() мы добавили следующее условие рендеринга:
selectItem = data => {
data.item.isSelect = !data.item.isSelect;
data.item.selectedClass = data.item.isSelect
? styles.selected: styles.list;
Затем, когда мы нажимаем на любой элемент в нашем FlatList, отображается функция selectItem , и она меняет стиль этого элемента на выделенный класс, например, выбранный класс здесь, а остальные элементы списка имеют стиль по умолчанию из списка классов.
А вот и важная часть
FlatList имеет свойство extraData , которое в основном повторно отображает FlatList всякий раз, когда есть какие-либо изменения с использованием состояния. Эта функция повторно отображает нашу selectItem и renderItem функцию и выделяет выбранные элементы. В противном случае будет выбран только один элемент, поскольку FlatList отображается в начале загрузки компонента и остается в том же состоянии, даже если состояние и состояние данных изменяются.
extraData
Это свойство маркера, указывающее список на повторную визуализацию (поскольку он реализует PureComponent).
extraData={this.state}
Все, что вам нужно сделать, это добавить его в компонент FlatList, и мы закончили с выделением нескольких элементов в списке.
Надеюсь, эта статья будет вам полезна и расширит вашу способность легко справляться с этим требованием. Я делюсь полным фрагментом кода здесь, если вы хотите использовать его в качестве примера.
