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 のインデックスおよび削除メソッドは非同期であり、Promise を返します。次のように連鎖させることができます。
SpotlightSearch . deleteAllItems ( ) . then ( ( ) => {
SpotlightSearch . indexItem ( {
title : "Strawberry" ,
contentDescription : "A sweet and juicy fruit." ,
uniqueIdentifier : "1" ,
thumbnailName : "strawberry" ,
} ) ;
} ) ;ユーザーが Spotlight 結果内の検索項目の 1 つをタップしたときに呼び出されるカスタム ハンドラーを追加することを選択できます。
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大歓迎❤️
