Expo / React Native mit Typesense InstantSearch Adapter

Installieren Sie Instantsearch gemäß den Reiseführer von Algolia:

npx expo installieren algoliasearch react-instantsearch-core

Installieren Sie Typesense gemäß den Anleitung von Typesense:

npm install --save Typensense-Instantsearch-Adapter @babel/Runtime

Richten Sie Typesense in Ihrer App.js-Datei oder einer Expo Router-Datei entsprechend der Anleitung von Typesense für React Native. Damit es funktioniert, müssen einige Einstellungen geändert werden.

Sie müssen eine SearchBox- und InfiniteHits-Komponente erstellen:

# ./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 importiere React von „react“; importiere { StyleSheet, View, FlatList } von „react-native“; importiere { useInfiniteHits } von „react-instantsearch-core“; exportiere Funktion InfiniteHits({ hitComponent: Hit, …props }) { const { hits, isLastPage, showMore } = useInfiniteHits({ …props, escapeHTML: false, }); returniere ( item.objectID} ItemSeparatorComponent={() => } onEndReached={() => { if (!isLastPage) { showMore(); } }} renderItem={({ item }) => ( )} /> ); }; const styles = StyleSheet.create({ separator: { borderBottomWidth: 1, borderColor: '#ddd', }, item: { padding: 18, }, });

Dies alles führt zur Datei App.js:

# App.js importiere { StyleSheet } von „react-native“; importiere React von „react“; importiere { InstantSearch } von „react-instantsearch-core“; importiere TypesenseInstantSearchAdapter von „typesense-instantsearch-adapter“; importiere { SearchBox } von „@/components/SearchBox“; importiere { InfiniteHits } von „@/components/InifiniteHits“; const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ server: { apiKey: "YOURKEY", // Achten Sie darauf, einen API-Schlüssel zu verwenden, der nur Suchvorgänge zulässt nodes: [ { host: "CLOUDURL.typesense.net", port: 443, path: "", // Optional. Beispiel: Wenn Sie Ihr Typesense in localhost:8108/typesense eingebunden haben, sollte der Pfad gleich '/typesense' sein protocol: "https", }, ], cacheSearchResultsForSeconds: 2 * 60, // Suchergebnisse vom Server zwischenspeichern. Standardmäßig 2 Minuten. Auf 0 setzen, um das Zwischenspeichern zu deaktivieren. }, // Die folgenden Parameter werden direkt an den Such-API-Endpunkt von Typesense übergeben. // Sie können also alle Parameter übergeben, die vom Suchendpunkt unten unterstützt werden. // query_by ist erforderlich. additionalSearchParameters: { query_by: "name", }, }); const searchClient = typesenseInstantsearchAdapter.searchClient; exportiere Standardfunktion App() { return (  ); } Funktion Hit({ hit }) { return ( {hit.name} ); }

Sie können weitere Felder, wie z. B. einen Filter, konfigurieren, indem Sie auf den Reiseführer aus Algolia.