Как создать React Native FlatList с возможностью поиска в реальном времени

1656555853 kak sozdat react native flatlist s vozmozhnostyu poiska v realnom

автор Викрант Неги

PlLxDxKKO47gauknTbaEs6Ka1LFxM5wsOfnr
React Native Searchable Flatlist

Если вы когда-нибудь пользовались мобильным приложением или создавали его, то вы, наверное, наткнулись на какой-то список — будь то длинный список контактов, продуктов, стран или других вещей.

Конечному пользователю они могут показаться очень простыми. Но для разработчиков отображение длинного списка данных всегда было проблемой, когда дело доходит до производительных длинных списков. Особенно это касается программ, созданных с помощью React Native.

Фон

В первые дни React Native у нас было старое добро ListView. Он имел много функций, которые делали его очень привлекательным, и он был выбором по умолчанию для эффективного отображения вертикального списка изменяемых данных.

Однако со временем появилось много проблем и ошибок, и был момент, когда команда React Native поняла, что пора заново изобрести велосипед.

Введите FlatList

В марте 2017 года Facebook представил FlatList компонент, который является более простым и эффективным способом реализации простых, продуктивных списков. Более того, его API легче понять, чем оригинал.ListView. Вот как выглядит простой FlatList:

<FlatList   data={[{title: ‘Title Text’, key: ‘item1’}, …]}   renderItem={({item}) => <ListItem title={item.title} />} />

Отдельно от FlatListвы также можете использовать SectionList для воспроизведения разделенных списков.

Что дальше

Как я упоминал ранее, ListView использовался в основном для отображения длинных списков данных, изменяющихся по вертикали. Но длинные списки данных полезны как молоток без ручки. ?

Почти все время, когда вы сталкиваетесь с длинным списком данных, вам также предоставляется возможность искать данные, чтобы не потерять поиск.

tRc29TnV5CmgAoO8moaZ79moeGeTUVTbBdj9
Список стран Whatsapp с поиском

React Native Searchable FlatList

Я решил создать что-нибудь для решения этой проблемы. Вы можете найти полный проект репо здесь.

Если вы не знакомы с FlatList, я бы рекомендовал сначала ознакомиться с основами FlatList. Эта статья Спенсера Карли лучшая для начинающих, впервые в React Native.

А теперь, без лишних раздумий, давайте начнем и создадим наш FlatList для поиска!

Сначала установим некоторые исходные состояния, которые мы будем использовать позже в проекте:

this.state = {
  loading: false,      
  data: [],      
  error: null,    
};

Нам также понадобится переменная массива:

this.arrayholder = [];

Пожалуй, пустой список не доставляет удовольствия. Позвольте приправить это некоторым случайным списком пользователей.

Мы перейдем к пользователю randomuser.me, который является бесплатным API с открытым кодом для создания случайных данных пользователя. Это как Lorem Ipsum, но для людей.

Давайте создадим функцию, которая запускает и получает некоторые пользовательские данные для нас.

makeRemoteRequest = () => {    
  const url = `
  this.setState({ loading: true });
  
  fetch(url)      
    .then(res => res.json())      
    .then(res => {        
      this.setState({          
        data: res.results,          
        error: res.error || null,          
        loading: false,        
      });        
      
     this.arrayholder = res.results;      
   })      
   .catch(error => {        
     this.setState({ error, loading: false });      
   });  
};

В приведенном выше фрагменте кода мы используем fetch API, чтобы сделать удаленный запрос API. Когда запрос будет выполнен, мы получим данные пользователя, сохраненные data государству, а также к нашему arrayholder.

Теперь, чтобы пользователь провел поиск в списке, нам нужно добавить строку поиска в верхней части FlatList. FlatList имеет параметр для добавления любого пользовательского компонента к его заголовку, что полезно, поскольку мы добавим туда компонент поиска.

renderHeader = () => {    
  return (      
    <SearchBar        
      placeholder="Type Here..."        
      lightTheme        
      round        
      onChangeText={text => this.searchFilterFunction(text)}
      autoCorrect={false}             
    />    
  );  
};

В приведенной выше функции мы используем react-native-elements SearchBar компонент как компонент исходного заглавия.

По умолчанию нет логики, которая будет фильтровать список, когда мы вводим внутри SearchBar. Для этого нам нужно написать функцию, которая будет фильтровать результаты как текст внутри SearchBar изменения.

searchFilterFunction = text => {    
  const newData = this.arrayholder.filter(item => {      
    const itemData = `${item.name.title.toUpperCase()}   
    ${item.name.first.toUpperCase()} ${item.name.last.toUpperCase()}`;
    
     const textData = text.toUpperCase();
      
     return itemData.indexOf(textData) > -1;    
  });
  
  this.setState({ data: newData });  
};

Вышеприведенная функция запустит функцию фильтра на arrayholder. Мы будем фильтровать пользователей на основе их имени, поэтому мы сохраним имя внутри itemData переменную и превратить ее в верхний регистр.

Эта функция получит введенный пользователем текст в качестве параметра, который мы сохраним в другой переменной textData после преобразования в верхний регистр.

После этого мы воспользуемся indexOf чтобы сравнить текст и вернуть true, если текст найден внутри itemData. Если возвращается true, то filter сохранит эти данные, иначе их будет игнорировать. Таким образом новые данные возвращаются каждый раз, когда пользователь вводит любой текст в строке поиска. Эти новые данные затем устанавливается на data состояния, которое в конечном итоге будет использоваться как источник данных для FlatList.

Теперь пора воспроизвести FlatList.

<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
  <FlatList          
    data={this.state.data}          
    renderItem={({ item }) => ( 
      <ListItem              
        roundAvatar              
        title={`${item.name.first} ${item.name.last}`}  
        subtitle={item.email}                           
        avatar={{ uri: item.picture.thumbnail }}   
        containerStyle={{ borderBottomWidth: 0 }} 
       />          
     )}          
     keyExtractor={item => item.email}  
     ItemSeparatorComponent={this.renderSeparator} 
     ListHeaderComponent={this.renderHeader}                             
  />            
</List>

Это все, что нам нужно сделать. Ура!!

PFxaKuUElMhRBp1cJh2BMtcWlsuCMXWBd588
FlatList с личным поиском в React

Завершающие мнения

Я пропустил некоторый код, который не столь важен для этого учебника и ради краткости. Вы можете найти полное рабочее репо на GitHub.

Кроме того, я считаю, что могут быть и другие способы достичь того же, и если вы найдете другой способ, пожалуйста, поделитесь им.

Вы также можете подписаться на меня в Twitter и GitHub. И посмотрите мои предыдущие статьи в Medium.

Другие полезные статьи:

Добавить комментарий

Ваш адрес email не будет опубликован.