react native spotlight search
v2.2.0
Ein React Native-Modul für iOS, das Spotlight-Suchfunktionen bietet. Auf diese Weise können Sie Inhalte aus Ihrer React Native-App heraus indizieren, sodass sie im Spotlight-Suchindex des iOS-Geräts angezeigt werden, was möglicherweise die Sichtbarkeit Ihrer App erhöht.
Mit Garn (empfohlen): $ yarn add react-native-spotlight-search
Oder mit NPM: $ npm install react-native-spotlight-search --save
Dieses Paket kann nicht in der „Expo Go“-App verwendet werden, da es benutzerdefinierten nativen Code erfordert.
Fügen Sie nach der Installation dieses npm-Pakets das Konfigurations-Plugin zum plugins Array Ihrer app.json oder app.config.js hinzu:
{
"expo" : {
"plugins" : [ " react-native-spotlight-search " ]
}
}Erstellen Sie als Nächstes Ihre App neu, wie in der Anleitung „Hinzufügen von benutzerdefiniertem nativen Code“ beschrieben.
Automatische Verlinkung oder manuell unten
react-native link react-native-spotlight-search oder Manuell unten
Fügen Sie einfach RCTSpotlightSearch.xcodeproj zu Bibliotheken und libRCTSpotlightSearch.a hinzu, um Binärdateien mit Bibliotheken unter „Erstellungsphasen“ zu verknüpfen. Weitere Informationen und Screenshots dazu finden Sie in der React Native-Dokumentation.
Wenn Sie in der Lage sein möchten, Rückrufe durch Tippen auf Suchelemente zu verarbeiten, müssen Sie den folgenden Code zu Ihrer AppDelegate-Datei hinzufügen:
# import " RCTSpotlightSearch.h "
- ( BOOL )application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)( NSArray * _Nullable))restorationHandler {
[RCTSpotlightSearch handleContinueUserActivity: userActivity];
return YES ;
}Wenn Xcode sich darüber beschwert, dass die Header-Datei nicht gefunden werden kann, stellen Sie bitte sicher, dass die Header-Suche Ihres Projekts Folgendes umfasst:
$(SRCROOT)/../node_modules/react-native-spotlight-search
So was:
Importieren Sie zunächst das Modul:
import SpotlightSearch from "react-native-spotlight-search" ;Sie können entweder ein Array von Elementen hinzufügen:
SpotlightSearch . indexItems ( [
{
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
domain : "fruit" ,
thumbnailName : "strawberry" ,
} ,
{
title : "Kiwi" ,
contentDescription : "Not a type of bird." ,
uniqueIdentifier : "2" ,
domain : "fruit" ,
thumbnailName : "kiwi" ,
} ,
] ) ;Oder einzelne Artikel:
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ; | Eigentum | Beschreibung | Typ | Erforderlich |
|---|---|---|---|
title | Der Titel des Suchelements. | string | Ja |
contentDescription | Eine Beschreibung, die in den Suchergebnissen unter dem Titel angezeigt wird. | string | NEIN |
uniqueIdentifier | Eine eindeutige und stabile Kennung. Wird verwendet, um auf den Artikel zu verweisen. | string | Ja |
domain | Eine Zeichenfolge zum sinnvollen Gruppieren verwandter Elemente. Wird dem Benutzer nicht angezeigt. | string | Ja |
thumbnailName | Ein lokaler Dateiname/Schlüssel zu einem Miniaturbild. Siehe Hinweis zu Miniaturansichten. | string | NEIN |
thumbnailData | Eine Base64-String-Darstellung eines Miniaturbilds. Siehe Hinweis zu Miniaturansichten. | string | NEIN |
keywords | Eine Reihe von Schlüsselwörtern, die zur Information des Suchindex verwendet werden können. Für den Benutzer nicht sichtbar. | [string] | NEIN |
Verwenden Sie einfach die gleiche Methode wie beim Hinzufügen von Artikeln. Achten Sie darauf, beim Indizieren des Elements auf denselben Schlüssel zu verweisen, damit alle neuen Metadatenänderungen im Spotlight-Index widergespiegelt werden.
Elemente können nach Kennung entfernt werden:
SpotlightSearch . deleteItemsWithIdentifiers ( [ "1" , "2" ] ) ;Oder nach Domäne:
SpotlightSearch . deleteItemsInDomains ( [ "fruit" ] ) ;Alternativ können Sie alle von Ihrer App indizierten Elemente löschen:
SpotlightSearch . deleteAllItems ( ) ;Alle Index- und Löschmethoden der API sind asynchron und geben Versprechen zurück. Sie können Dinge wie folgt verketten:
SpotlightSearch . deleteAllItems ( ) . then ( ( ) => {
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ;
} ) ;Sie können einen benutzerdefinierten Handler hinzufügen, der aufgerufen wird, wenn ein Benutzer auf eines der Suchelemente in den Spotlight-Ergebnissen tippt:
SpotlightSearch . searchItemTapped ( ( uniqueIdentifier ) => {
alert ( `You tapped on ${ uniqueIdentifier } !` ) ;
} ) ;Optional, wenn Sie das Suchelement erfassen möchten, auf das zum Öffnen der App getippt wurde (möglicherweise wurde der Listener festgelegt, nachdem das Ereignis ausgelöst wurde):
SpotlightSearch . getInitialSearchItem ( ) . then ( ( uniqueIdentifier ) => {
alert ( `You tapped on ${ uniqueIdentifier } and opened the app!` ) ;
} ) ;
// example in a useEffect with listener cleanup
useEffect ( ( ) => {
const spotlightListener = SpotlightSearch . searchItemTapped ( ( uniqueIdentifier ) => {
alert ( `You tapped on ${ uniqueIdentifier } and opened the app!` ) ;
} )
return ( ) => {
// cleanup listener
spotlightListener . remove ( )
}
} , [ ] ) Der Parameter ist der uniqueIdentifier , mit dem das Element indiziert wurde. Damit können Sie nach dem Artikel suchen und Informationen dazu anzeigen, indem Sie beispielsweise zu einer relevanten Seite in Ihrer App navigieren.
Um einen Bildpfad verwenden zu können, muss dieser derzeit lokal auf dem Gerät im Projekt-Assets-Ordner vorhanden sein. Dies ist eher eine Einschränkung von iOS als dieser Bibliothek.
Um Bilder zu verwenden, die sich nicht in Ihrem Assets-Ordner befinden (lokale oder Remote-Dateien), lesen Sie sie als Base64 und fügen Sie den Zeichenfolgenwert mithilfe der Eigenschaft thumbnailData ein.
PRs willkommen ❤️
