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.