Expo / React Native con adattatore Typesense InstantSearch

Installa Instantsearch secondo le istruzioni guida dell'Algolia:

npx expo installa algoliasearch react-instantsearch-core

Installa Typesense secondo quanto segue guida di Typesense:

npm install --save typesense-instantsearch-adapter @babel/runtime

Imposta Typesense nel tuo file App.js o in un file Expo Router in base a guida di Typesense per React NativePer farlo funzionare è necessario modificare alcune impostazioni.

È necessario creare un componente SearchBox e InfiniteHits:

# ./components/SearchBox.js

import React, { useRef, useState } from 'react';
import { StyleSheet, View, TextInput } from 'react-native';
import { useSearchBox } from 'react-instantsearch-core';

export function SearchBox(props) {
  const { query, refine } = useSearchBox(props);
  const [inputValue, setInputValue] = useState(query);
  const inputRef = useRef(null);

  function setQuery(newQuery) {
    setInputValue(newQuery);
    refine(newQuery);
  }

  // Track when the InstantSearch query changes to synchronize it with
  // the React state.
  // We bypass the state update if the input is focused to avoid concurrent
  // updates when typing.
  if (query !== inputValue && !inputRef.current?.isFocused()) {
    setInputValue(query);
  }

  return (
    <View style={styles.container}>
      <TextInput
        ref={inputRef}
        style={styles.input}i
        value={inputValue}
        onChangeText={setQuery}
        clearButtonMode="while-editing"
        autoCapitalize="none"
        autoCorrect={false}
        spellCheck={false}
        autoComplete="off"
        placeholder='Zoeken ...'
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#252b33',
    padding: 18,
  },
  input: {
    height: 48,
    padding: 12,
    fontSize: 16,
    backgroundColor: '#fff',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#ddd',
  },
});

# ./components/InfiniteHits.js import React da 'react'; import { StyleSheet, View, FlatList } da 'react-native'; import { useInfiniteHits } da 'react-instantsearch-core'; export function InfiniteHits({ hitComponent: Hit, ...props }) { const { hits, isLastPage, showMore } = useInfiniteHits({ ...props, escapeHTML: false, }); return ( elemento.objectID} ItemSeparatorComponent={() => } onEndReached={() => { if (!isLastPage) { showMore(); } }} renderItem={({ elemento }) => ( )} /> ); }; const styles = StyleSheet.create({ separator: { borderBottomWidth: 1, borderColor: '#ddd', }, item: { padding: 18, }, });

Tutto questo porterà al file App.js:

# App.js importa { StyleSheet } da 'react-native'; importa React da "react"; importa { InstantSearch } da 'react-instantsearch-core'; importa TypesenseInstantSearchAdapter da "typesense-instantsearch-adapter"; importa { SearchBox } da '@/components/SearchBox'; importa { InfiniteHits } da '@/components/InifiniteHits'; const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ server: { apiKey: "YOURKEY", // Assicurati di utilizzare una chiave API che consenta solo operazioni di ricerca nodes: [ { host: "CLOUDURL.typesense.net", port: 443, path: "", // Facoltativo. Esempio: se hai il tuo typesense montato in localhost:8108/typesense, il percorso dovrebbe essere uguale a '/typesense' protocol: "https", }, ], cacheSearchResultsForSeconds: 2 * 60, // Memorizza nella cache i risultati della ricerca dal server. Il valore predefinito è 2 minuti. Imposta su 0 per disabilitare la memorizzazione nella cache. }, // I seguenti parametri vengono passati direttamente all'endpoint API di ricerca di Typesense. // Quindi puoi passare tutti i parametri supportati dall'endpoint di ricerca sottostante. // query_by è obbligatorio. additionalSearchParameters: { query_by: "name", }, }); const searchClient = typesenseInstantsearchAdapter.searchClient; esporta la funzione predefinita App() { return (  ); } funzione Hit({ hit }) { ritorno ( {hit.nome} ); }

Puoi configurare altri campi, come un filtro, ecc., seguendo quanto segue guida dall'Algolia.