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 นี้ ให้เพิ่มปลั๊กอิน config ไปยังอาร์เรย์ plugins ของ app.json หรือ app.config.js ของคุณ :

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

จากนั้น ให้สร้างแอปของคุณใหม่ตามที่อธิบายไว้ในคำแนะนำ "การเพิ่มโค้ดเนทีฟที่กำหนดเอง"

อาร์เอ็น >= 0.60

การเชื่อมโยงอัตโนมัติหรือด้วยตนเองด้านล่าง

อาร์เอ็น < 0.60

react-native link react-native-spotlight-search หรือด้วยตนเองด้านล่าง

เพียงเพิ่ม RCTSpotlightSearch.xcodeproj ลงใน Libraries และเพิ่ม libRCTSpotlightSearch.a เพื่อ เชื่อมโยง Binary กับ Libraries ภายใต้ Build Phases ข้อมูลเพิ่มเติมและภาพหน้าจอเกี่ยวกับวิธีการทำเช่นนี้มีอยู่ในเอกสาร 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 ที่ใช้สร้างดัชนีรายการ คุณสามารถใช้สิ่งนี้เพื่อค้นหารายการและแสดงข้อมูลเกี่ยวกับรายการนั้น เช่น โดยการนำทางไปยังหน้าที่เกี่ยวข้องในแอปของคุณ