Eine Reihe von Hooks, die Capacitor-Entwicklern bei der Verwendung nativer Capacitor-APIs helfen.
| Betreuer | GitHub | Sozial |
|---|---|---|
| Ely Lucas | elylucas | @elylucas |
Diese Dokumente gelten für Capacitor 3-Plugins. Dokumente, die auf v2-Plugins abzielen, finden Sie im capv2-Zweig.
Um Capacitor Hooks in Ihrer App zu verwenden, installieren Sie das React Hook-Paket zusammen mit dem Capacitor-Plugin, das Sie verwenden möchten. Hier ist ein Beispiel für die Verwendung des Storage-Plugins zusammen mit seinem React-Hook:
# Install the Capacitor Plugin
npm install @capacitor/storage
# And then the React hook package:
npm install @capacitor-community/storage-reactImportieren Sie die Hooks:
import { useStorage } from '@capacitor-community/storage-react'Dann nutzen Sie die Hooks in Ihrer App:
const [ value , setValue ] = useStorage ( 'mykey' ) ; Während Sie mit Capacitor auf mehreren Plattformen in eine API schreiben können, werden nicht alle Funktionen auf allen Plattformen unterstützt. Wir empfehlen Ihnen, vor der Verwendung zu prüfen, ob die Funktion, die Sie verwenden möchten, verfügbar ist, um Laufzeitfehler zu vermeiden.
Jeder der Hook-Plugin-Pfade exportiert ein availableFeatures -Objekt, das eine Liste von Features für dieses Plugin enthält. Wenn die Funktion für die aktuelle Plattform, auf der die App ausgeführt wird, unterstützt wird, ist diese Funktion wahr:
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' ) ;
}In Capacitor 3 wurden alle Plugins in eigene Pakete aufgeteilt. Ebenso wurden die neuen React-Hooks-Plugins in ein eigenes Paket gepackt, sodass Sie den Hook für jedes von Ihnen verwendete Plugin installieren müssen.
Alle veralteten APIs von Capacitor 2 bis 3 wurden ebenfalls entfernt und aktualisiert, sodass Sie möglicherweise einige Änderungen vornehmen müssen, um API-Änderungen zu berücksichtigen. Weitere Informationen finden Sie in der Capacitor-Plugin-API.
Installation:
npm install @capacitor-community/app-reactVerwendung:
import { useAppState , useAppUrlOpen , useLaunchUrl , availableFeatures } from '@capacitor-community/app-react' ; useAppState bietet Zugriff auf App-Statusinformationen, z. B. ob die App aktiv oder inaktiv ist. Dieser Wert wird dynamisch aktualisiert.
const { state } = useAppState ( ) ; useLaunchUrl useLaunchUrl stellt die URL bereit, mit der die App ursprünglich gestartet wurde. Wenn Sie zukünftige eingehende URL-Ereignisse verfolgen möchten, verwenden Sie stattdessen unten useAppUrlOpen .
const { launchUrl } = useLaunchUrl ( ) ; useAppUrlOpen useAppUrlOpen stellt die aktuellste URL bereit, die zum Aktivieren der App verwendet wurde. Zum Beispiel, wenn der Benutzer einem Link in einer anderen App gefolgt ist, der Ihre App geöffnet hat.
const { appUrlOpen } = useAppUrlOpen ( ) ;Weitere Informationen zur Plugin-API finden Sie in den Dokumenten zum App Capacitor Plugin.
Installation:
npm install @capacitor-community/browser-reactVerwendung:
import { useClose , useOpen , availableFeatures } from '@capacitor-community/browser-react' ; useOpen und useClose bieten eine Möglichkeit, einen In-App-Browser für externe Inhalte zu starten und zu schließen:
// Open url in browser
const { open } = useOpen ( ) ;
open ( { url : 'http://ionicframework.com' } ) ;
// Close url in browser
const { close } = useClose ( ) ;
useClose ( ) ;Weitere Informationen zur Plugin-API finden Sie in der Dokumentation zum Browser Capacitor Plugin.
Installation:
npm install @capacitor-community/camera-reactVerwendung:
import { useCamera , availableFeatures } from '@capacitor-community/camera-react' ; useCamera bietet eine Möglichkeit, ein Foto aufzunehmen:
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 >Weitere Informationen zur Plugin-API finden Sie in der Dokumentation zum Camera Capacitor Plugin.
Installation:
npm install @capacitor-community/clipboard-reactVerwendung:
import { useClipboard , availableFeatures } from '@capacitor-community/clipboard-react' ; useClipboard liest und schreibt Daten aus der Zwischenablage:
const { value , getValue , setValue } = useClipboard ( ) ;
const paste = useCallback ( async ( ) => {
await setValue ( 'http://ionicframework.com/);
}, [setValue]);
const copy = useCallback(async () => {
getValue();
}, [getValue])Weitere Informationen zur Plugin-API finden Sie in den Dokumenten zum Clipboard Capacitor Plugin.
Installation:
npm install @capacitor-community/device-reactVerwendung:
import { useGetInfo , useGetLanguageCode , availableFeatures } from '@capacitor-community/device-react' ; useGetInfo , useGetLanguageCode ermöglicht den Zugriff auf Geräteinformationen und Gerätespracheinstellungen:
const { info } = useGetInfo ( ) ;
const { languageCode } = useGetLanguageCode ( ) ;Weitere Informationen zur Plugin-API finden Sie in der Dokumentation zum Device Capacitor Plugin.
Installation:
npm install @capacitor-community/filesystem-reactVerwendung:
import { useFilesystem , base64FromPath , availableFeatures } from '@capacitor-community/filesystem-react' ; useFilesystem gibt gängige Methoden zurück, um Zugriff auf die Dateisystem-APIs zu erhalten.
const { readFile } = useFilesystem ( ) ;
const file = await readFile ( {
path : filepath ,
directory : FilesystemDirectory . Data
} ) ; base64FromPath ist eine Hilfsmethode, die einen Pfad zu einer Datei aufnimmt und die Base64-codierte Darstellung dieser Datei zurückgibt.
Weitere Informationen zur Plugin-API finden Sie in den Dokumenten zum Filesystem Capacitor Plugin.
const base64String = await base64FromPath ( path ) ; Installation:
npm install @capacitor-community/geolocation-reactVerwendung:
import { useCurrentPosition , useWatchPosition , availableFeatures } from '@capacitor-community/geolocation-react' ; useCurrentPosition gibt eine einzelne Geolocation-Position mithilfe der Geolocation-API in Capacitor zurück. Die Position kann manuell aktualisiert werden, indem getPosition aufgerufen wird:
const { currentPosition , getPosition } = useCurrentPosition ( ) ;
const handleRefreshPosition = ( ) => {
getPosition ( ) ;
} useWatchPosition verfolgt eine Geolokalisierungsposition mithilfe der watchPosition in der Geolocation-API in Capacitor. Der Standort beginnt automatisch mit der Aktualisierung, und Sie können die Methoden clearWatch und startWatch verwenden, um die Überwachung manuell zu stoppen und neu zu starten.
const { currentPosition , startWatch , clearWatch } = useWatchPosition ( ) ;Weitere Informationen zur Plugin-API finden Sie in den Dokumenten zum Geolocation Capacitor Plugin.
Installation:
npm install @capacitor-community/keyboard-reactVerwendung:
import { useKeyboardState } from '@capacitor-community/keyboard' ; useKeyboard gibt zurück, ob die Bildschirmtastatur angezeigt wird oder nicht, sowie eine Annäherung an die Tastaturhöhe in Pixel.
const { isOpen , keyboardHeight } = useKeyboard ( ) ;
// Use keyboardHeight to translate an input that would otherwise be hidden by the keyboardWeitere Informationen zur Plugin-API finden Sie in der Dokumentation zum Keyboard Capacitor Plugin.
Installation:
npm install @capacitor-community/network-reactVerwendung:
import { useStatus , availableFeatures } from '@capacitor-community/network-react' ; useStatus überwacht den Netzwerkstatus und -informationen:
const { networkStatus } = useStatus ( ) ;Weitere Informationen zur Plugin-API finden Sie in der Dokumentation zum Network Capacitor Plugin.
Installation:
npm install @capacitor-community/screen-reader-reactVerwendung:
import { useIsScreenReaderEnabled , useSpeak , availableFeatures } from '@capacitor-community/screen-reader-react' ; useIsScreenReaderEnabled bietet Zugriff auf die Erkennung und Reaktion auf die Aktivierung eines Bildschirmlesegeräts oder einer Betriebssystemeinstellung:
const { isScreenReaderEnabled } = useIsScreenReaderEnabled ( ) ; useSpeak aktiviert eine Text-to-Speech-Engine (falls verfügbar), um gesprochenen Text zu lesen.
const { speak } = useSpeak ( ) ;
speak ( { value : textToSpeak } )Weitere Informationen zur Plugin-API finden Sie in der Dokumentation zum ScreenReader Capacitor Plugin.
Installation:
npm install @capacitor-community/storage-reactVerwendung:
import { useStorage , useStorageItem , availableFeatures } from '@capacitor-community/storage-react' ; useStorage bietet Zugriff auf die Speicher-Engine von Capacitor. Es gibt auch einen Helfer namens useStorageItem , der die Verwaltung eines einzelnen Elements vereinfacht, wenn Sie nicht auf die vollständige Storage-API zugreifen müssen (siehe unten).
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 verfolgt ein einzelnes Element und bietet eine gute Möglichkeit, dieses Element zu lesen und zu schreiben:
const [ name , setName ] = useStorageItem ( 'name' , 'Max' ) ;
// Example:
const updateName = useCallback ( ( n ) => {
setName ( n ) ;
} , [ setName ] ) ; useStorageItem verwendet den bereits im Speicher befindlichen Anfangswert oder den bereitgestellten Wert, wenn kein Wert vorhanden ist.
Weitere Informationen zur Plugin-API finden Sie in der Dokumentation zum Storage Capacitor Plugin.
Dies ist ein sich entwickelndes Projekt und noch werden nicht alle Capacitor-Plugins unterstützt. Wenn Sie eines benötigen, können Sie gerne ein Problem dafür eröffnen oder, noch besser, eine PR einreichen!
