Squeak.ru - шаблоны программирования

Список поиска React Native Firebase

У меня есть список, который гидратирован из моей Firebase в моем приложении React Native. Я наткнулся на несколько руководств о том, как люди ищут список с помощью функции выборки, но ничего для Firebase.

У меня есть панель поиска в заголовке моего списка, как я могу искать по ключевому слову и фильтровать результаты с помощью Firebase?

Я следовал руководству на веб-сайте Firebase, чтобы настроить список и источник данных. Я хочу иметь возможность искать по ключевому слову в каждом из этих полей

listenForItems(itemsRef) {

itemsRef.on('value', (snap) => {

  var items = [];
  snap.forEach((child) => {
    items.push({
      title: child.val().title,
      category: child.val().category,
      description: child.val().description,
    });
  });

  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(items)
  });

});
}

Ответы:


1

Я наконец понял это. Этот код выполняет поиск по определенному имени элемента.

База данных

 {
  "directory" : {
    "macintosh" : {
      "address" : "117 East 11th Street, Hays, KS 67601",
      "firstLetter" : "m",
      "title" : "Macintosh",
    },
   "apple" : {
      "address" : "117 East 11th Street, Hays, KS 67601",
      "firstLetter" : "a",
      "title" : "apple",
    },
  },

ListView с панелью поиска

  render() {
    return (
      <View style={styles.container}>
      <ScrollView>
      <SearchBar
          returnKeyType='search'
          lightTheme
          placeholder='Search...'
          onChangeText={(text) => this.setState({searchText:text})}
          onSubmitEditing={() => this.firstSearch()}
      />
        {
          this.state.loading &&

          <ActivityIndicator
            size="large"
            color="#3498db"
            style={styles.activityStyle}
          />

        }
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderItem.bind(this)}
            enableEmptySections={true}
        />
        </ScrollView>
      </View>
    );
  }

Функция поиска

  firstSearch() {
    this.searchDirectory(this.itemsRef);
  }



searchDirectory(itemsRef) {

var searchText = this.state.searchText.toString();

if (searchText == ""){
  this.listenForItems(itemsRef);
}else{
  itemsRef.orderByChild("searchable").startAt(searchText).endAt(searchText).on('value', (snap) => {

    items = [];
    snap.forEach((child) => {
      items.push({
        address: child.val().address,
        firstLetter: child.val().firstLetter,
        title: child.val().title,
      });
    });


    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(items)
    });

  });
}

}

Это выполняет поиск в базе данных firebase, заменяя источник данных listview с помощью функции firebase orderbychild.startat().endat(). Это ближе всего к функциям поиска sql "SELECT * BY% LIKE%".

Я также изменил свой код для поиска по первой букве. Поэтому, если кто-то ищет «Macbuk», он все равно покажет результат «Macbook». Он ищет только букву М. Я добавил еще одно поле в свою базу данных к первой букве названия для поиска и сделал его строчным.

19.10.2016
Новые материалы

Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...