Как сделать «закладки» в FlatList?

Для создания функциональности "закладок" в FlatList, необходимо использовать состояние компонента в React Native. Вот подробное руководство по реализации «закладок» в FlatList:

1. Создайте новый компонент React Native и импортируйте необходимые зависимости:

import React, { useState } from 'react';
import { FlatList, TouchableOpacity } from 'react-native';

2. Определите исходные данные, которые будут отображаться в FlatList. Данные могут быть представлены массивом объектов или получены из внешних источников данных (например, API).

const initialData = [
  { id: 1, title: 'Закладка 1', isBookmarked: false },
  { id: 2, title: 'Закладка 2', isBookmarked: false },
  // и так далее...
];

3. Используйте хук useState() для создания состояния, которое будет отслеживать данные ихмодификации. В данном случае, состояние будет содержать массив объектов с данными и обновленным свойством isBookmarked.

const [data, setData] = useState(initialData);

4. Создайте функцию, которая будет обновлять состояние в соответствии с выбранными закладками. В данном примере использована функция toggleBookmark, которая изменяет значение свойства isBookmarked объекта на противоположное.

const toggleBookmark = (id) => {
  const updatedData = data.map(item => {
    if (item.id === id) {
      return { ...item, isBookmarked: !item.isBookmarked };
    }
    return item;
  });
  setData(updatedData);
};

5. В компоненте return определите FlatList и настройте его свойства. Используйте метод renderItem, чтобы настроить отображение элементов списка.

return (
  <FlatList
    data={data}
    renderItem={({ item }) => (
      <TouchableOpacity onPress={() => toggleBookmark(item.id)}>
        {/* Отобразите свойства элемента списка */}
        <Text>{item.title}</Text>
        <Text>{item.isBookmarked ? 'В закладках' : 'Не в закладках'}</Text>
      </TouchableOpacity>
    )}
    keyExtractor={(item) => item.id.toString()}
  />
);

6. Теперь, когда пользователь нажимает на элемент списка, вызывается функция toggleBookmark, которая обновляет состояние и перерисовывает компонент для отражения изменений.

Таким образом, после выполнения вышеуказанных шагов, элементы списка можно будет добавлять или удалять из списка "закладок" при нажатии на них.
Надеюсь, эта информация поможет вам создать функциональность "закладок" в FlatList в React Native!