react native spotlight search
v2.2.0
Um módulo React Native para iOS que fornece funcionalidade de pesquisa Spotlight. Isso permite indexar o conteúdo de seu aplicativo React Native para que ele apareça no índice de pesquisa Spotlight do dispositivo iOS, aumentando potencialmente a exposição do seu aplicativo.
Com fio (recomendado): $ yarn add react-native-spotlight-search
Ou com NPM: $ npm install react-native-spotlight-search --save
Este pacote não pode ser usado no aplicativo "Expo Go" porque requer código nativo personalizado.
Depois de instalar este pacote npm, adicione o plugin de configuração ao array plugins do seu app.json ou app.config.js :
{
"expo" : {
"plugins" : [ " react-native-spotlight-search " ]
}
}Em seguida, reconstrua seu aplicativo conforme descrito no guia "Adicionando código nativo personalizado".
Vinculação automática ou manualmente abaixo
react-native link react-native-spotlight-search ou manualmente abaixo
Basta adicionar RCTSpotlightSearch.xcodeproj a Libraries e adicionar libRCTSpotlightSearch.a a Link Binary With Libraries em Build Phases . Mais informações e capturas de tela sobre como fazer isso estão disponíveis na documentação do React Native.
Se desejar lidar com retornos de chamada tocados em itens de pesquisa, você precisará adicionar o seguinte código ao seu arquivo AppDelegate:
# import " RCTSpotlightSearch.h "
- ( BOOL )application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)( NSArray * _Nullable))restorationHandler {
[RCTSpotlightSearch handleContinueUserActivity: userActivity];
return YES ;
}Se o Xcode reclamar por não conseguir encontrar o arquivo de cabeçalho, certifique-se de que a pesquisa de cabeçalho do seu projeto inclua o seguinte:
$(SRCROOT)/../node_modules/react-native-spotlight-search
Assim:
Primeiro, importe o módulo:
import SpotlightSearch from "react-native-spotlight-search" ;Você pode adicionar uma série de itens:
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 itens individuais:
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ; | Propriedade | Descrição | Tipo | Obrigatório |
|---|---|---|---|
title | O título do item de pesquisa. | string | Sim |
contentDescription | Uma descrição que aparece abaixo do título nos resultados da pesquisa. | string | Não |
uniqueIdentifier | Um identificador único e estável. Usado para se referir ao item. | string | Sim |
domain | Uma string para agrupar itens relacionados de uma forma que faça sentido. Não exibido ao usuário. | string | Sim |
thumbnailName | Um nome/chave de arquivo local para uma imagem em miniatura. Consulte uma nota sobre miniaturas. | string | Não |
thumbnailData | Uma representação de string base64 de uma imagem em miniatura. Consulte uma nota sobre miniaturas. | string | Não |
keywords | Uma matriz de palavras-chave que podem ser usadas para ajudar a informar o índice de pesquisa. Não visível para o usuário. | [string] | Não |
Basta usar o mesmo método para adicionar itens. Certifique-se de fazer referência à mesma chave ao indexar o item para que quaisquer novas alterações nos metadados sejam refletidas no índice Spotlight.
Os itens podem ser removidos por identificador:
SpotlightSearch . deleteItemsWithIdentifiers ( [ "1" , "2" ] ) ;Ou por domínio:
SpotlightSearch . deleteItemsInDomains ( [ "fruit" ] ) ;Alternativamente, você pode excluir todos os itens indexados pelo seu aplicativo:
SpotlightSearch . deleteAllItems ( ) ;Todos os métodos de indexação e exclusão da API são assíncronos e retornam promessas. Você pode encadear coisas assim:
SpotlightSearch . deleteAllItems ( ) . then ( ( ) => {
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ;
} ) ;Você pode optar por adicionar um manipulador personalizado que será invocado no caso de um usuário tocar em um dos itens de pesquisa nos resultados do Spotlight:
SpotlightSearch . searchItemTapped ( ( uniqueIdentifier ) => {
alert ( `You tapped on ${ uniqueIdentifier } !` ) ;
} ) ;Opcionalmente, se você quiser capturar o item de pesquisa que foi tocado para abrir o aplicativo (talvez o ouvinte tenha sido definido após o evento ter sido acionado):
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 ( )
}
} , [ ] ) O parâmetro será o uniqueIdentifier com o qual o item foi indexado. Você pode usar isso para pesquisar o item e exibir informações sobre ele, por exemplo, navegando até uma página relevante em seu aplicativo.
Atualmente, para usar um caminho de imagem, ele deve existir localmente no dispositivo, na pasta de ativos do projeto. Esta é uma limitação do iOS e não desta biblioteca.
Para usar imagens que não estão em sua pasta de ativos (arquivos locais ou remotos), leia-as como base64 e inclua o valor da string usando a propriedade thumbnailData .
PRs sejam bem-vindos ❤️
