react native complete flatlist

React-Complete-Flatlist

Расширенная версия Native Flat List с множеством встроенных функций, такими как поиск, переживание, чтобы обновить, нет доступного сообщения, если пустая строка

Осторожность:

renderItem props возвращаемый item и параметры index . Параметр item возвращает один элемент в массиве item . Но если текст поиска не пуст, dan highlightColor opps установлен на любой цвет, параметр item вернет новую структуру объекта JSON (для того, чтобы отобразить выделенный текст в JSX). Это может сломать вашу логику. Поэтому, если вы хотите получить доступ к исходной структуре ваших данных, она будет под item.cleanData . Помните, item.cleanData существует только в том случае, если реквизит highlightColor и поиск Textfield не пусты (пользователь ищет)

Использование:

 import React, {useRef} from 'react';
import { Text, SafeAreaView, TouchableOpacity } from 'react-native';
import CompleteFlatList from 'react-native-complete-flatlist';

const list = [
  { name: 'Fattah', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
  { name: 'Syah', status: 'Active', time: '9:14 PM', date: '1 Dec 2018' },
  { name: 'Izzat', status: 'Active', time: '8:15 PM', date: '1 Jan 2018' },
  { name: 'Ali', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
  { name: 'Abu', status: 'Active', time: '8:11 PM', date: '1 Jan 2018' },
  { name: 'Fitri', status: 'Active', time: '8:20 PM', date: '1 Jan 2018' },
  { name: 'Armi', status: 'Active', time: '8:33 PM', date: '1 Jan 2018' },
  { name: 'Eidit', status: 'Active', time: '9:10 PM', date: '1 Jan 2018' },
  { name: 'Hamdan', status: 'Active', time: '10:10 PM', date: '1 Jan 2018' },
  {
    name: 'Muhyiddeen',
    status: 'Blocked',
    time: '10:10 PM',
    date: '9 Feb 2018',
  },
];

const App = () => {
  const ref = useRef();
  const renderItem = ({item, index}) => {
    const data = item.cleanData ? item.cleanData : item;

    console.log('item (if search bar is not empty and prop highlightColor is not empty, item will contains extra data to enable highlight feature)', item);
    console.log('cleanData (if search bar is not empty and prop highlightColor is not empty, cleanData will contain original data structure without extra data)', item.cleanData);


    console.log('this is index number : ' + index);

    console.log(data + ' this is original data');

    return <Text>{item.name}</Text>;
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CompleteFlatList
        searchKey={['name', 'status', 'time', 'date']}
        pullToRefreshCallback={() => console.log('refreshing')}
        data={list}
        // renderSeparator={null}
        ref={ref}
        highlightColor="yellow"
        renderItem={renderItem}
      />
      <TouchableOpacity onPress={() => ref.current.clearSearch()} style={{ padding: 5 }}>
        <Text>Clear Search</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default App;

Обновление от V 1.xx до V 2.xx

Изменить с renderItem={(data, index) => {} } на renderItem={({item, index, separators}) => {} }

Характеристики

Все реквизиты Flatlist должны работать плюс реквизиты, упомянутые ниже

Проп	Тип	Описание	По умолчанию	Необходимый
showSearch	логический	Если будет определено true (и searchKey PROP), будет показана строка поиска.	истинный	Необязательный
isJelly	логический	Если true , при прокрутке пользователя, список расширит лил, и когда пользователь остановите перетаскивание, список вернется к исходному размеру (imessage в стиле iPhone)	ЛОЖЬ	Необязательный
slide	нить	Анимация, как все элементы входят в список. Может быть "нет", "влево" или "справа"	none	Необязательный
data	массив объектов	Данные, которые будут отображаться в списке	[]	Требуется (давай, конечно, вам нужны данные для этого)
backgroundStyles	стиль объект	Стиль фантастического списка	нулевой	Необязательный
searchBarBackgroundStyles	стиль объект	Стиль поискового фона	нулевой	Необязательный
pullToRefreshCallback	функция	Функция обратного вызова, когда пользователь тянет, чтобы обновить	нулевой	Необязательно (Pull To Refresh не будет доступно, если это не поставляется
isLoading	логический	Если это правда, загрузка будет показана в верхней части списка.	ЛОЖЬ	Необязательный
renderItem	Функция, которая возвращает элемент JSX (точно так же, как RN ListView и Flatlist)	Шаблон ряда в плоской списке	NULL (открыт для PR, если кто -нибудь хочет сделать шаблон по умолчанию для этого)	Требуется (так как я еще не делаю шаблон по умолчанию)
renderSeparator	Функция, которая возвращает элемент JSX, который будет отображаться между рядами (точно так же, как RN ListView и Flatlist)	Шаблон сепаратора в плоском списке	() => <View style={{ height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" }} />	Необязательный
placeholder	нить	Заполнитель поля поиска	"Поиск ..."	Необязательный
searchTextInputStyle	Объект (стиль для React Native's TextInput Component)	стиль для поиска поля поиска	нулевой	Необязательный
highlightColor	цвет	Цвет игрированных слов фон при сопоставлении ключевого слова поиска. Пожалуйста, прочитайте предварительное осторожность при использовании этой опоры на вершине Readme	желтый	Необязательный
searchKey	массив строки	Это должно быть название ключей, доступных в данных, которые будут использоваться для поиска. Если эта опора не будет предоставлена, ввод текста поиска не будет отображаться. **Warning: nested key not yet supported	[]	Необязательно (если не поставлено, поле поиска не появится)
elementBetweenSearchAndList	Элемент JSX	Что делать между SearchBar и списком	нулевой	Необязательный
refreshOnLoad	логический	Если true , pullToRefreshCallback будет вызвана, если это будет доступно	истинный	Необязательный
onSearch	функция, которая заменит pullToRefreshCallback	Если существует, pullToRefreshCallback будет переоборудован. Это не будет запускаться на нажатию клавиши, но на нажатой клавиши возврата. Этот реквизит вводится, если результат поиска из API. Если вы просто хотите локальный поиск (поиск из существующего массива), это не требуется. onSearch будет автоматически получить параметр keyword	() => null	Необязательный
loadNext	функция	Если это будет определена, эта функция будет вызвана, когда пользователь прокручивает плоский список внизу. USECASE - вызов следующей страницей вашего API. В случае определения значок загрузки будет показан в нижней части списка. Чтобы скрыть значок загрузки, убедитесь, что эта опора не определена	неопределенный	Необязательный
refreshControlProps	объект	Реквизит для обновления	неопределенный	Необязательный

Методы

Если у вас есть ref в компонент,

 const completeFlatList = useRef();
...
 <CompleteFlatList
   ...
    ref={completeFlatList}
   ...
 />

или в компонентах на основе

<CompleteFlatList
   ...
   ref={c => this.completeFlatList = c}
   ...
/>

Вы можете использовать любой метод (ы) ниже: completeFlatList.current.methodName()

или в компонентах на основе

this.completeFlatList.methodName()

Метод	Описание
ClearSearch	Очистить поиск вход программно