電容器反應鉤

一組幫助 Capacitor 開發人員使用本機 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'

然後在您的應用程式中使用鉤子：

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

特徵檢測

雖然 Capacitor 允許您跨多個平台寫入一個 API，但並非所有平台都支援所有功能。建議在使用之前檢查您想要使用的功能是否可用，以避免任何執行時間錯誤。

每個鉤子插件路徑都會匯出一個availableFeatures對象，其中包含該插件的清單功能。如果應用程式運行的當前平台支援該功能，則該功能將為 true：

 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 插件也被放入了自己的包中，因此您需要為您使用的每個插件安裝鉤子。

Capacitor 2 到 3 中任何已棄用的 API 也已刪除和更新，因此您可能需要進行一些修改以適應 API 變更。請參閱電容器插件 API 以了解更多資訊。

掛鉤使用

@capacitor/app 掛鉤

安裝：

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 ( ) ;

有關插件 API 的更多信息，請參閱 App Capacitor 插件文件。

@capcitor/瀏覽器掛鉤

安裝：

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 的更多信息，請參閱瀏覽器電容器插件文件。

@capacitor/相機掛鉤

安裝：

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 編碼表示形式。

有關插件 API 的更多信息，請參閱文件系統電容器插件文件。

 const base64String = await base64FromPath ( path ) ;

地理定位掛鉤

安裝：

npm install @capacitor-community/geolocation-react

用法：

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

useCurrentPosition使用 Capacitor 中的 Geolocation API 傳回單一地理位置。可以透過呼叫getPosition手動更新位置：

 const { currentPosition , getPosition } = useCurrentPosition ( ) ;

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

useWatchPosition使用 Capacitor 中 Geolocation API 中的watchPosition來追蹤地理位置。位置將自動開始更新，您可以使用clearWatch和startWatch方法手動停止和重新啟動手錶。

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

有關插件 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 ( ) ;

有關插件 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 } )

有關插件 API 的更多信息，請參閱 ScreenReader 電容器插件文件。

收納掛鉤

安裝：

npm install @capacitor-community/storage-react

用法：

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

useStorage提供對 Capacitor 儲存引擎的存取。還有一個名為useStorageItem的幫助程序，如果您不需要存取完整的儲存 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 ] ) ;