react native spotlight search
v2.2.0
Spotlight 검색 기능을 제공하는 iOS용 React Native 모듈입니다. 이를 통해 React Native 앱 내 콘텐츠를 인덱싱하여 iOS 기기의 Spotlight 검색 색인에 나타나 잠재적으로 앱 노출을 늘릴 수 있습니다.
원사 사용(권장): $ yarn add react-native-spotlight-search
또는 NPM을 사용하는 경우: $ npm install react-native-spotlight-search --save
이 패키지는 사용자 정의 네이티브 코드가 필요하기 때문에 "Expo Go" 앱에서 사용할 수 없습니다.
이 npm 패키지를 설치한 후 app.json 또는 app.config.js 의 plugins 배열에 구성 플러그인을 추가하세요.
{
"expo" : {
"plugins" : [ " react-native-spotlight-search " ]
}
}그런 다음 "사용자 정의 네이티브 코드 추가" 가이드에 설명된 대로 앱을 다시 빌드하세요.
자동 연결 또는 수동으로 아래 연결
react-native link react-native-spotlight-search 또는 아래 수동으로
간단히 RCTSpotlightSearch.xcodeproj 라이브러리 에 추가하고 libRCTSpotlightSearch.a Build Phases 아래의 Link Binary With Libraries 에 추가하세요. 이를 수행하는 방법에 대한 자세한 정보와 스크린샷은 React Native 문서에서 확인할 수 있습니다.
검색 항목 탭 콜백을 처리하려면 AppDelegate 파일에 다음 코드를 추가해야 합니다.
# import " RCTSpotlightSearch.h "
- ( BOOL )application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)( NSArray * _Nullable))restorationHandler {
[RCTSpotlightSearch handleContinueUserActivity: userActivity];
return YES ;
}Xcode에서 헤더 파일을 찾을 수 없다고 불평하는 경우 프로젝트의 헤더 검색에 다음이 포함되어 있는지 확인하십시오.
$(SRCROOT)/../node_modules/react-native-spotlight-search
이와 같이:
먼저 모듈을 가져옵니다.
import SpotlightSearch from "react-native-spotlight-search" ;항목 배열을 추가할 수 있습니다.
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" ,
} ,
] ) ;또는 개별 항목:
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ; | 재산 | 설명 | 유형 | 필수의 |
|---|---|---|---|
title | 검색 항목의 제목입니다. | string | 예 |
contentDescription | 검색 결과의 제목 아래에 표시되는 설명입니다. | string | 아니요 |
uniqueIdentifier | 고유하고 안정적인 식별자입니다. 항목을 참조하는 데 사용됩니다. | string | 예 |
domain | 관련 항목을 의미 있는 방식으로 그룹화하기 위한 문자열입니다. 사용자에게 표시되지 않습니다. | string | 예 |
thumbnailName | 썸네일 이미지에 대한 로컬 파일 이름/키입니다. 축소판에 대한 참고 사항을 참조하세요. | string | 아니요 |
thumbnailData | 썸네일 이미지의 base64 문자열 표현입니다. 축소판에 대한 참고 사항을 참조하세요. | string | 아니요 |
keywords | 검색 색인을 알리는 데 사용할 수 있는 키워드 배열입니다. 사용자에게 표시되지 않습니다. | [string] | 아니요 |
항목을 추가하는 것과 동일한 방법을 사용하면 됩니다. 새로운 메타데이터 변경 사항이 Spotlight 인덱스에 반영되도록 항목을 인덱싱할 때 동일한 키를 참조해야 합니다.
항목은 식별자로 제거될 수 있습니다:
SpotlightSearch . deleteItemsWithIdentifiers ( [ "1" , "2" ] ) ;또는 도메인별:
SpotlightSearch . deleteItemsInDomains ( [ "fruit" ] ) ;또는 앱에서 색인을 생성한 모든 항목을 삭제할 수 있습니다.
SpotlightSearch . deleteAllItems ( ) ;모든 API 색인 및 삭제 메소드는 비동기식이며 약속을 반환합니다. 다음과 같이 연결할 수 있습니다.
SpotlightSearch . deleteAllItems ( ) . then ( ( ) => {
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ;
} ) ;사용자가 Spotlight 결과의 검색 항목 중 하나를 탭할 때 호출되는 사용자 정의 핸들러를 추가하도록 선택할 수 있습니다.
SpotlightSearch . searchItemTapped ( ( uniqueIdentifier ) => {
alert ( `You tapped on ${ uniqueIdentifier } !` ) ;
} ) ;선택적으로 앱을 열기 위해 탭한 검색 항목을 캡처하려는 경우(아마도 이벤트가 트리거된 후에 리스너가 설정되었을 수 있음):
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 ( )
}
} , [ ] ) 매개변수는 항목이 색인화되는 uniqueIdentifier 가 됩니다. 이를 사용하여 항목을 조회하고 항목에 대한 정보를 표시할 수 있습니다(예: 앱에서 관련 페이지로 이동).
현재 이미지 경로를 사용하려면 해당 경로가 장치의 프로젝트 자산 폴더에 로컬로 존재해야 합니다. 이는 이 라이브러리가 아닌 iOS의 제한 사항입니다.
자산 폴더(로컬 또는 원격 파일)에 없는 이미지를 사용하려면 해당 이미지를 base64로 읽고 thumbnailData 속성을 사용하여 문자열 값을 포함시킵니다.
PR 환영합니다 ❤️
