Expo / React Native met Typesense InstantSearch Adapter

iPhone Typesense InstantSearch.js

Installeer Instantsearch volgens de gids van Algolia:

npx expo installeren algoliasearch react-instantsearch-core

Installeer Typesense volgens de gids van Typesense:

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

Stel Typesense in uw App.js-bestand of een Expo Router-bestand in volgens de gids van Typesense voor React Native. Er moeten enkele instellingen worden gewijzigd om het werkend te krijgen.

U moet een SearchBox- en InfiniteHits-component maken:

# ./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 importeer React van 'react'; importeer { StyleSheet, View, FlatList } van 'react-native'; importeer { useInfiniteHits } van 'react-instantsearch-core'; exporteer functie InfiniteHits({ hitComponent: Hit, ...props }) { const { hits, isLastPage, showMore } = useInfiniteHits({ ...props, escapeHTML: false, }); return ( item.objectID} ItemSeparatorComponent={() => } onEndReached={() => { als (!isLastPage) { showMore(); } }} renderItem={({ item }) => ( )} /> ); }; const styles = StyleSheet.create({ separator: { borderBottomWidth: 1, borderColor: '#ddd', }, item: { padding: 18, }, });

Dit alles leidt naar het App.js-bestand:

# App.js importeer { StyleSheet } van 'react-native'; importeer React van "react"; importeer { InstantSearch } van 'react-instantsearch-core'; importeer TypesenseInstantSearchAdapter van "typesense-instantsearch-adapter"; importeer { SearchBox } van '@/components/SearchBox'; importeer { InfiniteHits } van '@/components/InifiniteHits'; const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({ server: { apiKey: "YOURKEY", // Zorg ervoor dat u een API-sleutel gebruikt die alleen zoekbewerkingen toestaat nodes: [ { host: "CLOUDURL.typesense.net", port: 443, path: "", // Optioneel. Voorbeeld: als u uw typesense hebt gemount in localhost:8108/typesense, moet het pad gelijk zijn aan '/typesense' protocol: "https", }, ], cacheSearchResultsForSeconds: 2 * 60, // Cache zoekresultaten van server. Standaardwaarde is 2 minuten. Stel in op 0 om caching uit te schakelen. }, // De volgende parameters worden rechtstreeks doorgegeven aan het zoek-API-eindpunt van Typesense. // U kunt dus alle parameters doorgeven die worden ondersteund door het onderstaande zoekeindpunt. // query_by is vereist. additionalSearchParameters: { query_by: "name", }, }); const searchClient = typesenseInstantsearchAdapter.searchClient; export standaardfunctie App() { return (  ); } functie Hit({ hit }) { return ( {hit.naam} );}

U kunt meer velden configureren, zoals een filter, enz., door de volgende stappen te volgen: gids van Algolia.

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

nl_NLNederlands
Scroll naar boven