커패시터 반응 후크

Capacitor 개발자가 기본 Capacitor API를 사용하는 데 도움이 되는 후크 세트입니다.

유지관리자

유지관리자	GitHub	사회의
엘리 루카스	엘리루카스	@elylucas

이 문서는 Capacitor 3 플러그인용입니다. v2 플러그인을 대상으로 하는 문서는 capv2 분기를 참조하세요.

시작하기

앱에서 Capacitor Hooks 사용을 시작하려면 사용하려는 Capacitor 플러그인과 함께 React Hook 패키지를 설치하세요. 다음은 React 후크와 함께 Storage 플러그인을 사용하는 예입니다.

 # 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 후크 플러그인도 자체 패키지에 포함되었으므로 사용하는 각 플러그인에 대해 후크를 설치해야 합니다.

Capacitor 2~3의 더 이상 사용되지 않는 API도 제거 및 업데이트되었으므로 API 변경 사항을 고려하여 일부 수정이 필요할 수 있습니다. 자세한 내용은 Capacitor Plugin 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/browser 후크

설치:

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에 대한 자세한 내용은 Filesystem Capacitor Plugin 문서를 참조하세요.

 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에 대한 자세한 내용은 Geolocation Capacitor 플러그인 문서를 참조하세요.

키보드 후크

설치:

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 활성화된 화면 읽기 장치 또는 OS 설정을 감지하고 응답하는 데 대한 액세스를 제공합니다.

 const { isScreenReaderEnabled } = useIsScreenReaderEnabled ( ) ;

useSpeak 텍스트 음성 변환 엔진(사용 가능한 경우)을 활성화하여 음성 텍스트를 읽습니다.

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

플러그인 API에 대한 자세한 내용은 ScreenReader Capacitor 플러그인 문서를 참조하세요.

보관용 후크

설치:

npm install @capacitor-community/storage-react

용법:

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

useStorage Capacitor의 스토리지 엔진에 대한 액세스를 제공합니다. 전체 Storage API에 액세스할 필요가 없는 경우 단일 항목을 쉽게 관리할 수 있게 해주는 useStorageItem 이라는 도우미도 있습니다(아래 참조).

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