react native spotlight search تنزيل - react native spotlight search تنزيل كود المصدر

react native spotlight search

شفرة المصدر الأخرى

v2.2.0

تنزيل

رد فعل-الأصلي-تسليط الضوء على البحث

؟ هذا المشروع يبحث عن مشرفين! إذا كنت مهتمًا بالمساعدة في الحفاظ على هذا المستودع عن طريق إصلاح الأخطاء وتحديث التبعيات ومراجعة المساهمات الأخرى، فيرجى فتح مشكلة في المستودع تحتوي على القليل من المعلومات عن نفسك؟

وحدة React Native لنظام التشغيل iOS التي توفر وظيفة البحث في Spotlight. يتيح لك هذا فهرسة المحتوى من داخل تطبيق React Native بحيث يظهر في فهرس بحث Spotlight لجهاز iOS، مما قد يؤدي إلى زيادة عرض تطبيقك.

الميزات الحالية

إضافة العناصر.
تحديث العناصر.
حذف العناصر.
قم بتسجيل رد اتصال للتعامل معه عند النقر على عنصر البحث.
دعم للصور

تثبيت

مع الغزل (مستحسن): $ yarn add react-native-spotlight-search

أو باستخدام NPM: $ npm install react-native-spotlight-search --save

دائرة الرقابة الداخلية

المعرض

البرنامج المساعد للبناء المسبق

لا يمكن استخدام هذه الحزمة في تطبيق "Expo Go" لأنها تتطلب رمزًا أصليًا مخصصًا.

بعد تثبيت حزمة npm هذه، أضف مكون التهيئة الإضافي إلى مصفوفة plugins الخاصة بـ app.json أو app.config.js :

{
  "expo" : {
    "plugins" : [ " react-native-spotlight-search " ]
  }
}

بعد ذلك، أعد إنشاء تطبيقك كما هو موضح في دليل "إضافة رمز أصلي مخصص".

رن >= 0.60

الربط التلقائي أو يدويًا أدناه

RN <0.60

react-native link react-native-spotlight-search أو يدويًا أدناه

ما عليك سوى إضافة RCTSpotlightSearch.xcodeproj إلى المكتبات وإضافة libRCTSpotlightSearch.a لربط الملف الثنائي بالمكتبات ضمن مراحل البناء . مزيد من المعلومات ولقطات الشاشة حول كيفية القيام بذلك متاحة في وثائق React Native.

في AppDelegate الخاص بك (اختياري)

إذا كنت ترغب في أن تكون قادرًا على التعامل مع عمليات الاسترجاعات التي تم النقر عليها في عنصر البحث، فستحتاج إلى إضافة التعليمة البرمجية التالية إلى ملف 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 الذي تمت فهرسة العنصر به. يمكنك استخدام هذا للبحث عن العنصر وعرض معلومات عنه، على سبيل المثال، من خلال الانتقال إلى صفحة ذات صلة في تطبيقك.