react native spotlight search
v2.2.0
Un módulo React Native para iOS que proporciona la funcionalidad de búsqueda de Spotlight. Esto le permite indexar contenido desde su aplicación React Native para que aparezca en el índice de búsqueda de Spotlight del dispositivo iOS, lo que potencialmente aumenta la exposición de su aplicación.
Con hilo (recomendado): $ yarn add react-native-spotlight-search
O con NPM: $ npm install react-native-spotlight-search --save
Este paquete no se puede utilizar en la aplicación "Expo Go" porque requiere código nativo personalizado.
Después de instalar este paquete npm, agregue el complemento de configuración a la matriz de plugins de su app.json o app.config.js :
{
"expo" : {
"plugins" : [ " react-native-spotlight-search " ]
}
}A continuación, reconstruya su aplicación como se describe en la guía "Agregar código nativo personalizado".
Vinculación automática o manual a continuación
react-native link react-native-spotlight-search o manualmente a continuación
Simplemente agregue RCTSpotlightSearch.xcodeproj a Bibliotecas y agregue libRCTSpotlightSearch.a para vincular binario con bibliotecas en Fases de compilación . Más información y capturas de pantalla sobre cómo hacer esto están disponibles en la documentación de React Native.
Si desea poder manejar las devoluciones de llamadas de elementos de búsqueda pulsadas, deberá agregar el siguiente código a su archivo 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 queja de no poder encontrar el archivo de encabezado, asegúrese de que la búsqueda de encabezado de su proyecto incluya lo siguiente:
$(SRCROOT)/../node_modules/react-native-spotlight-search
Como esto:
Primero, importe el módulo:
import SpotlightSearch from "react-native-spotlight-search" ;Puede agregar una variedad de elementos:
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" ,
} ,
] ) ;O artículos individuales:
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ; | Propiedad | Descripción | Tipo | Requerido |
|---|---|---|---|
title | El título del elemento de búsqueda. | string | Sí |
contentDescription | Una descripción que aparece debajo del título en los resultados de búsqueda. | string | No |
uniqueIdentifier | Un identificador único y estable. Se utiliza para referirse al artículo. | string | Sí |
domain | Una cadena para agrupar elementos relacionados de una manera que tenga sentido. No se muestra al usuario. | string | Sí |
thumbnailName | Un nombre de archivo local/clave para una imagen en miniatura. Consulte una nota sobre las miniaturas. | string | No |
thumbnailData | Una representación de cadena base64 de una imagen en miniatura. Consulte una nota sobre las miniaturas. | string | No |
keywords | Una serie de palabras clave que se pueden utilizar para ayudar a informar el índice de búsqueda. No visible para el usuario. | [string] | No |
Simplemente utilice el mismo método que para agregar elementos. Asegúrese de hacer referencia a la misma clave al indexar el elemento para que cualquier cambio nuevo en los metadatos se refleje en el índice de Spotlight.
Los elementos se pueden eliminar mediante identificador:
SpotlightSearch . deleteItemsWithIdentifiers ( [ "1" , "2" ] ) ;O por dominio:
SpotlightSearch . deleteItemsInDomains ( [ "fruit" ] ) ;Alternativamente, puedes eliminar todos los elementos indexados por tu aplicación:
SpotlightSearch . deleteAllItems ( ) ;Todos los métodos de indexación y eliminación de API son asincrónicos y devuelven promesas. Puedes encadenar cosas como esta:
SpotlightSearch . deleteAllItems ( ) . then ( ( ) => {
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ;
} ) ;Puede optar por agregar un controlador personalizado que se invocará en caso de que un usuario toque uno de los elementos de búsqueda en los resultados de Spotlight:
SpotlightSearch . searchItemTapped ( ( uniqueIdentifier ) => {
alert ( `You tapped on ${ uniqueIdentifier } !` ) ;
} ) ;Opcionalmente, si desea capturar el elemento de búsqueda que se tocó para abrir la aplicación (tal vez el oyente se configuró después de que se activó el evento):
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 ( )
}
} , [ ] ) El parámetro será el uniqueIdentifier con el que se indexó el elemento. Puede utilizar esto para buscar el elemento y mostrar información sobre él, por ejemplo, navegando a una página relevante en su aplicación.
Actualmente, para utilizar una ruta de imagen, debe existir localmente en el dispositivo en la carpeta de activos del proyecto. Esta es una limitación de iOS más que de esta biblioteca.
Para usar imágenes que no están en su carpeta de activos (archivos locales o remotos), léalas como base64 e incluya el valor de la cadena usando la propiedad thumbnailData .
RP bienvenidos ❤️
