电容器反应钩

一组帮助 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 ] ) ;