react native spotlight search
v2.2.0
Un module React Native pour iOS qui fournit la fonctionnalité de recherche Spotlight. Cela vous permet d'indexer le contenu de votre application React Native afin qu'il apparaisse dans l'index de recherche Spotlight de l'appareil iOS, augmentant ainsi potentiellement l'exposition de votre application.
Avec du fil (recommandé) : $ yarn add react-native-spotlight-search
Ou avec NPM : $ npm install react-native-spotlight-search --save
Ce package ne peut pas être utilisé dans l'application « Expo Go » car il nécessite un code natif personnalisé.
Après avoir installé ce package npm, ajoutez le plugin de configuration au tableau plugins de votre app.json ou app.config.js :
{
"expo" : {
"plugins" : [ " react-native-spotlight-search " ]
}
}Ensuite, reconstruisez votre application comme décrit dans le guide « Ajout de code natif personnalisé ».
Liaison automatique ou manuelle ci-dessous
react-native link react-native-spotlight-search ou Manuellement ci-dessous
Ajoutez simplement RCTSpotlightSearch.xcodeproj aux bibliothèques et ajoutez libRCTSpotlightSearch.a pour lier le binaire aux bibliothèques sous Build Phases . Plus d'informations et des captures d'écran sur la façon de procéder sont disponibles dans la documentation React Native.
Si vous souhaitez pouvoir gérer les rappels d'éléments de recherche, vous devrez ajouter le code suivant à votre fichier AppDelegate :
# import " RCTSpotlightSearch.h "
- ( BOOL )application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)( NSArray * _Nullable))restorationHandler {
[RCTSpotlightSearch handleContinueUserActivity: userActivity];
return YES ;
}Si Xcode se plaint de ne pas pouvoir trouver le fichier d'en-tête, assurez-vous que la recherche d'en-tête de votre projet inclut les éléments suivants :
$(SRCROOT)/../node_modules/react-native-spotlight-search
Comme ça:
Tout d'abord, importez le module :
import SpotlightSearch from "react-native-spotlight-search" ;Vous pouvez soit ajouter un tableau d'éléments :
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" ,
} ,
] ) ;Ou des articles individuels :
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ; | Propriété | Description | Taper | Requis |
|---|---|---|---|
title | Le titre de l'élément de recherche. | string | Oui |
contentDescription | Une description qui apparaît sous le titre dans les résultats de recherche. | string | Non |
uniqueIdentifier | Un identifiant unique et stable. Utilisé pour désigner l'article. | string | Oui |
domain | Une chaîne permettant de regrouper des éléments associés d'une manière logique. Non affiché à l'utilisateur. | string | Oui |
thumbnailName | Un nom de fichier local/une clé pour une image miniature. Voir une remarque sur les vignettes. | string | Non |
thumbnailData | Représentation sous forme de chaîne base64 d'une image miniature. Voir une remarque sur les vignettes. | string | Non |
keywords | Un tableau de mots-clés qui peuvent être utilisés pour éclairer l’index de recherche. Non visible pour l'utilisateur. | [string] | Non |
Utilisez simplement la même méthode que pour ajouter des éléments. Assurez-vous de référencer la même clé lors de l'indexation de l'élément afin que toute nouvelle modification des métadonnées soit reflétée dans l'index Spotlight.
Les éléments peuvent être supprimés par identifiant :
SpotlightSearch . deleteItemsWithIdentifiers ( [ "1" , "2" ] ) ;Ou par domaine :
SpotlightSearch . deleteItemsInDomains ( [ "fruit" ] ) ;Alternativement, vous pouvez supprimer tous les éléments indexés par votre application :
SpotlightSearch . deleteAllItems ( ) ;Toutes les méthodes d'indexation et de suppression de l'API sont asynchrones et renvoient des promesses. Vous pouvez enchaîner des choses comme ceci :
SpotlightSearch . deleteAllItems ( ) . then ( ( ) => {
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ;
} ) ;Vous pouvez choisir d'ajouter un gestionnaire personnalisé qui sera invoqué dans le cas où un utilisateur appuie sur l'un des éléments de recherche dans les résultats Spotlight :
SpotlightSearch . searchItemTapped ( ( uniqueIdentifier ) => {
alert ( `You tapped on ${ uniqueIdentifier } !` ) ;
} ) ;Facultativement, si vous souhaitez capturer l'élément de recherche qui a été sélectionné pour ouvrir l'application (peut-être que l'écouteur a été défini après le déclenchement de l'événement) :
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 ( )
}
} , [ ] ) Le paramètre sera l' uniqueIdentifier avec lequel l'élément a été indexé. Vous pouvez l'utiliser pour rechercher l'élément et afficher des informations le concernant, par exemple en accédant à une page pertinente dans votre application.
Actuellement, pour utiliser un chemin d'image, celui-ci doit exister localement sur l'appareil dans le dossier des ressources du projet. Il s'agit d'une limitation d'iOS plutôt que de cette bibliothèque.
Pour utiliser des images qui ne se trouvent pas dans votre dossier d'actifs (fichiers locaux ou distants), lisez-les en base64 et incluez la valeur de chaîne à l'aide de la propriété thumbnailData .
Les PR sont les bienvenus ❤️
