react hooks

ตะขอปฏิกิริยาของตัวเก็บประจุ

ชุดตะขอที่จะช่วยให้นักพัฒนาตัวเก็บประจุใช้ Capacitor API แบบเนทีฟ

ผู้ดูแล

ผู้ดูแล	GitHub	ทางสังคม
เอลี่ ลูคัส	เอลิลูกัส	@elylucas

เอกสารเหล่านี้มีไว้สำหรับปลั๊กอิน Capacitor 3 สำหรับเอกสารที่กำหนดเป้าหมายปลั๊กอิน v2 โปรดดูสาขา capv2

เริ่มต้นใช้งาน

หากต้องการเริ่มใช้ Capacitor Hooks ในแอปของคุณ คุณจะต้องติดตั้งแพ็คเกจ React Hook พร้อมกับปลั๊กอิน Capacitor ที่คุณต้องการใช้ นี่คือตัวอย่างการใช้ปลั๊กอิน Storage ร่วมกับ React hook:

 # Install the Capacitor Plugin
npm install @capacitor/storage 
# And then the React hook package:
npm install @capacitor-community/storage-react

นำเข้าตะขอ:

 import { useStorage } from '@capacitor-community/storage-react'

จากนั้นใช้ hooks ในแอปของคุณ:

 const [ value , setValue ] = useStorage ( 'mykey' ) ; 

การตรวจจับคุณสมบัติ

แม้ว่า Capacitor จะช่วยให้คุณสามารถเขียนไปยัง API เดียวในหลายแพลตฟอร์มได้ แต่คุณสมบัติบางอย่างอาจไม่รองรับบนทุกแพลตฟอร์ม ขอแนะนำให้ตรวจสอบว่าคุณลักษณะที่คุณตั้งใจจะใช้พร้อมใช้งานก่อนใช้งานหรือไม่ เพื่อหลีกเลี่ยงข้อผิดพลาดรันไทม์

เส้นทางปลั๊กอิน hook แต่ละเส้นทางจะส่งออกอ็อบเจ็กต์ availableFeatures ซึ่งมีรายการคุณลักษณะสำหรับปลั๊กอินนั้น หากฟีเจอร์นี้ได้รับการรองรับสำหรับแพลตฟอร์มปัจจุบันที่แอปทำงานอยู่ ฟีเจอร์นั้นจะเป็นจริง:

 const { useStorageItem , availableFeatures } = `@capacitor-community/storage-react` ;
const [ value , setValue ] = useStorage ( 'mykey' ) ;
...
if ( availableFeatures . useStorage ) {
  // Storage is available, feel free to use it!
  setValue ( 'cake' ) ;
}

การอัพเกรดจาก Capacitor 2 React Hooks

ใน Capacitor 3 ปลั๊กอินทั้งหมดถูกแยกออกเป็นแพ็คเกจของตัวเอง ในทำนองเดียวกัน ปลั๊กอิน React hooks ใหม่ก็ถูกใส่ไว้ในแพ็คเกจของตัวเองเช่นกัน ดังนั้นคุณจะต้องติดตั้ง hook สำหรับปลั๊กอินแต่ละตัวที่คุณใช้

API ที่เลิกใช้แล้วจากตัวเก็บประจุ 2 ถึง 3 ก็ถูกลบและอัปเดตด้วย ดังนั้นคุณอาจต้องทำการแก้ไขบางอย่างเพื่อพิจารณาการเปลี่ยนแปลง API ดู Capacitor Plugin API เพื่อเรียนรู้เพิ่มเติม

การใช้ตะขอ

@ ตัวเก็บประจุ / แอพ Hooks

การติดตั้ง:

npm install @capacitor-community/app-react

การใช้งาน:

 import { useAppState , useAppUrlOpen , useLaunchUrl , availableFeatures } from '@capacitor-community/app-react' ;

useAppState ให้การเข้าถึงข้อมูลสถานะของแอป เช่น แอปทำงานอยู่หรือไม่ใช้งาน ค่านี้จะอัปเดตแบบไดนามิก

 const { state } = useAppState ( ) ; 

useLaunchUrl

useLaunchUrl ระบุ URL ที่ใช้เปิดตัวแอปครั้งแรก หากคุณต้องการติดตามเหตุการณ์ URL ขาเข้าในอนาคต ให้ใช้ useAppUrlOpen ด้านล่างแทน

 const { launchUrl } = useLaunchUrl ( ) ; 

useAppUrlOpen

useAppUrlOpen ระบุ URL ล่าสุดที่ใช้ในการเปิดใช้งานแอป ตัวอย่างเช่น หากผู้ใช้คลิกลิงก์ในแอปอื่นที่เปิดแอปของคุณ

 const { appUrlOpen } = useAppUrlOpen ( ) ;

ดูเอกสารปลั๊กอิน App Capacitor สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

@capcitor/เบราว์เซอร์ Hooks

การติดตั้ง:

npm install @capacitor-community/browser-react

การใช้งาน:

 import { useClose , useOpen , availableFeatures } from '@capacitor-community/browser-react' ;

useOpen , useClose จัดเตรียมวิธีการเปิดและปิดเบราว์เซอร์ในแอปสำหรับเนื้อหาภายนอก:

 // Open url in browser
const { open } = useOpen ( ) ;

open ( { url : 'http://ionicframework.com' } ) ;

// Close url in browser
const { close } = useClose ( ) ;
useClose ( ) ;

ดูเอกสารปลั๊กอินตัวเก็บประจุของเบราว์เซอร์สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

@ตัวเก็บประจุ/ตะขอกล้อง

การติดตั้ง:

npm install @capacitor-community/camera-react

การใช้งาน:

 import { useCamera , availableFeatures } from '@capacitor-community/camera-react' ;

useCamera มีวิธีการถ่ายภาพ:

 const { photo , getPhoto } = useCamera ( ) ;
const triggerCamera = useCallback ( async ( ) => {
  getPhoto ( {
      quality : 100 ,
      allowEditing : false ,
      resultType : CameraResultType . DataUrl
    } )
} , [ getPhoto ] ) ;

< div > { photo && < img alt = "" src = { photo . dataUrl } / > } < / div >

ดูเอกสารปลั๊กอินตัวเก็บประจุของกล้องสำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

ตะขอคลิปบอร์ด

การติดตั้ง:

npm install @capacitor-community/clipboard-react

การใช้งาน:

 import { useClipboard , availableFeatures } from '@capacitor-community/clipboard-react' ;

useClipboard อ่านและเขียนข้อมูลคลิปบอร์ด:

 const { value , getValue , setValue } = useClipboard ( ) ;

const paste = useCallback ( async ( ) => {
  await setValue ( 'http://ionicframework.com/);
}, [setValue]);

const copy = useCallback(async () => {
  getValue(); 
}, [getValue])

ดูเอกสารปลั๊กอินตัวเก็บประจุคลิปบอร์ดสำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

ตะขออุปกรณ์

การติดตั้ง:

npm install @capacitor-community/device-react

การใช้งาน:

 import { useGetInfo , useGetLanguageCode , availableFeatures } from '@capacitor-community/device-react' ;

useGetInfo , useGetLanguageCode ให้การเข้าถึงข้อมูลอุปกรณ์และการตั้งค่าภาษาของอุปกรณ์:

 const { info } = useGetInfo ( ) ;
const { languageCode } = useGetLanguageCode ( ) ;

ดูเอกสารปลั๊กอินตัวเก็บประจุอุปกรณ์สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

ตะขอระบบไฟล์

การติดตั้ง:

npm install @capacitor-community/filesystem-react

การใช้งาน:

 import { useFilesystem , base64FromPath , availableFeatures } from '@capacitor-community/filesystem-react' ;

useFilesystem ส่งคืนวิธีการทั่วไปเพื่อเข้าถึง API ระบบไฟล์

 const { readFile } = useFilesystem ( ) ;

const file = await readFile ( {
  path : filepath ,
  directory : FilesystemDirectory . Data
} ) ;

base64FromPath เป็นวิธีการช่วยเหลือที่จะใช้เส้นทางไปยังไฟล์และส่งคืนการแสดงที่เข้ารหัส base64 ของไฟล์นั้น

ดูเอกสารปลั๊กอิน Filesystem Capacitor Plugin สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

 const base64String = await base64FromPath ( path ) ; 

ตะขอระบุตำแหน่งทางภูมิศาสตร์

การติดตั้ง:

npm install @capacitor-community/geolocation-react

การใช้งาน:

 import { useCurrentPosition , useWatchPosition , availableFeatures } from '@capacitor-community/geolocation-react' ;

useCurrentPosition ส่งคืนตำแหน่งทางภูมิศาสตร์เดียวโดยใช้ Geolocation API ในตัวเก็บประจุ สามารถอัพเดตตำแหน่งได้ด้วยตนเองโดยการเรียก getPosition :

 const { currentPosition , getPosition } = useCurrentPosition ( ) ;

const handleRefreshPosition = ( ) => {
  getPosition ( ) ;
}

useWatchPosition ติดตามตำแหน่งทางภูมิศาสตร์โดยใช้ watchPosition ใน Geolocation API ใน Capacitor ตำแหน่งจะเริ่มอัปเดตโดยอัตโนมัติ และคุณสามารถใช้วิธี clearWatch และ startWatch เพื่อหยุดและรีสตาร์ทนาฬิกาด้วยตนเองได้

 const { currentPosition , startWatch , clearWatch } = useWatchPosition ( ) ;

ดูเอกสารปลั๊กอิน Geolocation Capacitor สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

ตะขอคีย์บอร์ด

การติดตั้ง:

npm install @capacitor-community/keyboard-react

การใช้งาน:

 import { useKeyboardState } from '@capacitor-community/keyboard' ;

useKeyboard ส่งคืนว่าแป้นพิมพ์บนหน้าจอจะแสดงหรือไม่ รวมถึงการประมาณความสูงของแป้นพิมพ์เป็นพิกเซล

 const { isOpen , keyboardHeight } = useKeyboard ( ) ;
// Use keyboardHeight to translate an input that would otherwise be hidden by the keyboard

ดูเอกสารปลั๊กอินตัวเก็บประจุคีย์บอร์ดสำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

ตะขอเครือข่าย

การติดตั้ง:

npm install @capacitor-community/network-react

การใช้งาน:

 import { useStatus , availableFeatures } from '@capacitor-community/network-react' ;

useStatus ตรวจสอบสถานะเครือข่ายและข้อมูล:

 const { networkStatus } = useStatus ( ) ;

ดูเอกสารปลั๊กอิน Network Capacitor สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

ตะขอโปรแกรมอ่านหน้าจอ

การติดตั้ง:

npm install @capacitor-community/screen-reader-react

การใช้งาน:

 import { useIsScreenReaderEnabled , useSpeak , availableFeatures } from '@capacitor-community/screen-reader-react' ;

useIsScreenReaderEnabled ให้การเข้าถึงการตรวจจับและการตอบสนองต่ออุปกรณ์อ่านหน้าจอหรือการตั้งค่าระบบปฏิบัติการที่เปิดใช้งาน:

 const { isScreenReaderEnabled } = useIsScreenReaderEnabled ( ) ;

useSpeak เปิดใช้งานเครื่องมือแปลงข้อความเป็นคำพูด (ถ้ามี) เพื่ออ่านข้อความที่พูด

 const { speak } = useSpeak ( ) ;
speak ( { value : textToSpeak } )

ดูเอกสารปลั๊กอินตัวเก็บประจุ ScreenReader สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

ตะขอเก็บของ

การติดตั้ง:

npm install @capacitor-community/storage-react

การใช้งาน:

 import { useStorage , useStorageItem , availableFeatures } from '@capacitor-community/storage-react' ;

useStorage ให้การเข้าถึงเครื่องมือจัดเก็บข้อมูลของตัวเก็บประจุ นอกจากนี้ยังมีตัวช่วยที่เรียกว่า useStorageItem ซึ่งทำให้การจัดการรายการเดียวเป็นเรื่องง่ายหากคุณไม่จำเป็นต้องเข้าถึง Storage API แบบเต็ม (ดูด้านล่าง)

 const { get , set , remove , getKeys , clear } = useStorage ( ) ;
useEffect ( ( ) => {
  async function example ( ) {
    const value = await get ( 'name' ) ;
    await set ( 'name' , 'Max' ) ;
    await remove ( 'name' ) ;
    const allKeys = await getKeys ( ) ;
    await clear ( ) ;
  }
} , [ get , set , remove , keys , clear ] ) ; 

useStorageItem

useStorageItem ติดตามรายการเดียวและจัดเตรียมวิธีที่ดีในการอ่านและเขียนรายการนั้น:

 const [ name , setName ] = useStorageItem ( 'name' , 'Max' ) ;

// Example:
const updateName = useCallback ( ( n ) => {
  setName ( n ) ;
} , [ setName ] ) ;

useStorageItem จะใช้ค่าเริ่มต้นที่มีอยู่ในพื้นที่จัดเก็บแล้ว หรือค่าเริ่มต้นที่ให้ไว้หากไม่มีมูลค่าที่มีอยู่

ดูเอกสารปลั๊กอิน Storage Capacitor สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน API

ตะขออื่นๆ

นี่เป็นโปรเจ็กต์ที่กำลังพัฒนาและยังไม่รองรับปลั๊กอินตัวเก็บประจุทั้งหมด หากมีสิ่งใดที่คุณต้องการ อย่าลังเลที่จะเปิดประเด็นให้ หรือดีกว่านั้น ส่ง PR เลย!