Un conjunto de enlaces para ayudar a los desarrolladores de Capacitor a utilizar las API nativas de Capacitor.
| mantenedor | GitHub | Social |
|---|---|---|
| Ely Lucas | elylucas | @elylucas |
Estos documentos son para complementos de Capacitor 3. Para documentos que apuntan a complementos v2, consulte la rama capv2.
Para comenzar a usar Capacitor Hooks en su aplicación, instale el paquete React Hook junto con el complemento Capacitor que desea usar. A continuación se muestra un ejemplo del uso del complemento Almacenamiento junto con su gancho React:
# Install the Capacitor Plugin
npm install @capacitor/storage
# And then the React hook package:
npm install @capacitor-community/storage-reactImporta los ganchos:
import { useStorage } from '@capacitor-community/storage-react'Luego usa los ganchos en tu aplicación:
const [ value , setValue ] = useStorage ( 'mykey' ) ; Si bien Capacitor le permite escribir en una API en varias plataformas, no todas las funciones son compatibles con todas las plataformas. Se recomienda verificar si la función que desea utilizar está disponible antes de usarla para evitar errores de tiempo de ejecución.
Cada una de las rutas del complemento de enlace exporta un objeto de availableFeatures , que contiene una lista de características para ese complemento. Si la función es compatible con la plataforma actual en la que se ejecuta la aplicación, esa función será verdadera:
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' ) ;
}En Capacitor 3, todos los complementos se separaron en sus propios paquetes. Del mismo modo, los nuevos complementos de ganchos de React también se incluyeron en su propio paquete, por lo que deberá instalar el gancho para cada complemento que utilice.
Todas las API obsoletas de Capacitor 2 a 3 también se eliminaron y actualizaron, por lo que es posible que deba realizar algunas modificaciones para tener en cuenta los cambios de API. Consulte la API del complemento Capacitor para obtener más información.
Instalación:
npm install @capacitor-community/app-reactUso:
import { useAppState , useAppUrlOpen , useLaunchUrl , availableFeatures } from '@capacitor-community/app-react' ; useAppState proporciona acceso a la información del estado de la aplicación, como si la aplicación está activa o inactiva. Este valor se actualizará dinámicamente.
const { state } = useAppState ( ) ; useLaunchUrl useLaunchUrl proporciona la URL con la que se inició inicialmente la aplicación. Si desea realizar un seguimiento de futuros eventos de URL entrantes, utilice useAppUrlOpen a continuación.
const { launchUrl } = useLaunchUrl ( ) ; useAppUrlOpen useAppUrlOpen proporciona la URL más reciente utilizada para activar la aplicación. Por ejemplo, si el usuario siguió un enlace en otra aplicación que abrió su aplicación.
const { appUrlOpen } = useAppUrlOpen ( ) ;Consulte los documentos del complemento App Capacitor para obtener más información sobre la API del complemento.
Instalación:
npm install @capacitor-community/browser-reactUso:
import { useClose , useOpen , availableFeatures } from '@capacitor-community/browser-react' ; useOpen , useClose proporciona una forma de iniciar y cerrar un navegador dentro de la aplicación para contenido externo:
// Open url in browser
const { open } = useOpen ( ) ;
open ( { url : 'http://ionicframework.com' } ) ;
// Close url in browser
const { close } = useClose ( ) ;
useClose ( ) ;Consulte los documentos del complemento del condensador del navegador para obtener más información sobre la API del complemento.
Instalación:
npm install @capacitor-community/camera-reactUso:
import { useCamera , availableFeatures } from '@capacitor-community/camera-react' ; useCamera proporciona una manera de tomar una foto:
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 >Consulte los documentos del complemento Camera Capacitor para obtener más información sobre la API del complemento.
Instalación:
npm install @capacitor-community/clipboard-reactUso:
import { useClipboard , availableFeatures } from '@capacitor-community/clipboard-react' ; useClipboard lee y escribe datos del portapapeles:
const { value , getValue , setValue } = useClipboard ( ) ;
const paste = useCallback ( async ( ) => {
await setValue ( 'http://ionicframework.com/);
}, [setValue]);
const copy = useCallback(async () => {
getValue();
}, [getValue])Consulte los documentos del complemento del condensador del portapapeles para obtener más información sobre la API del complemento.
Instalación:
npm install @capacitor-community/device-reactUso:
import { useGetInfo , useGetLanguageCode , availableFeatures } from '@capacitor-community/device-react' ; useGetInfo , useGetLanguageCode brinda acceso a la información del dispositivo y a la configuración de idioma del dispositivo:
const { info } = useGetInfo ( ) ;
const { languageCode } = useGetLanguageCode ( ) ;Consulte los documentos del complemento de condensador de dispositivo para obtener más información sobre la API del complemento.
Instalación:
npm install @capacitor-community/filesystem-reactUso:
import { useFilesystem , base64FromPath , availableFeatures } from '@capacitor-community/filesystem-react' ; useFilesystem devuelve métodos comunes para obtener acceso a las API del sistema de archivos.
const { readFile } = useFilesystem ( ) ;
const file = await readFile ( {
path : filepath ,
directory : FilesystemDirectory . Data
} ) ; base64FromPath es un método auxiliar que tomará una ruta a un archivo y devolverá la representación codificada en base64 de ese archivo.
Consulte los documentos del complemento del condensador del sistema de archivos para obtener más información sobre la API del complemento.
const base64String = await base64FromPath ( path ) ; Instalación:
npm install @capacitor-community/geolocation-reactUso:
import { useCurrentPosition , useWatchPosition , availableFeatures } from '@capacitor-community/geolocation-react' ; useCurrentPosition devuelve una única posición de geolocalización utilizando la API de geolocalización en Capacitor. La posición se puede actualizar manualmente llamando getPosition :
const { currentPosition , getPosition } = useCurrentPosition ( ) ;
const handleRefreshPosition = ( ) => {
getPosition ( ) ;
} useWatchPosition rastrea una posición de geolocalización usando watchPosition en la API de geolocalización en Capacitor. La ubicación comenzará a actualizarse automáticamente y podrá utilizar los métodos clearWatch y startWatch para detener y reiniciar manualmente el reloj.
const { currentPosition , startWatch , clearWatch } = useWatchPosition ( ) ;Consulte los documentos del complemento del condensador de geolocalización para obtener más información sobre la API del complemento.
Instalación:
npm install @capacitor-community/keyboard-reactUso:
import { useKeyboardState } from '@capacitor-community/keyboard' ; useKeyboard devuelve si se muestra o no el teclado en pantalla, así como una aproximación de la altura del teclado en píxeles.
const { isOpen , keyboardHeight } = useKeyboard ( ) ;
// Use keyboardHeight to translate an input that would otherwise be hidden by the keyboardConsulte los documentos del complemento del condensador de teclado para obtener más información sobre la API del complemento.
Instalación:
npm install @capacitor-community/network-reactUso:
import { useStatus , availableFeatures } from '@capacitor-community/network-react' ; useStatus monitorea el estado y la información de la red:
const { networkStatus } = useStatus ( ) ;Consulte los documentos del complemento de condensador de red para obtener más información sobre la API del complemento.
Instalación:
npm install @capacitor-community/screen-reader-reactUso:
import { useIsScreenReaderEnabled , useSpeak , availableFeatures } from '@capacitor-community/screen-reader-react' ; useIsScreenReaderEnabled proporciona acceso para detectar y responder a un dispositivo de lectura de pantalla o configuración del sistema operativo que se habilita:
const { isScreenReaderEnabled } = useIsScreenReaderEnabled ( ) ; useSpeak activa un motor de texto a voz (si está disponible) para leer texto hablado.
const { speak } = useSpeak ( ) ;
speak ( { value : textToSpeak } )Consulte los documentos del complemento ScreenReader Capacitor para obtener más información sobre la API del complemento.
Instalación:
npm install @capacitor-community/storage-reactUso:
import { useStorage , useStorageItem , availableFeatures } from '@capacitor-community/storage-react' ; useStorage proporciona acceso al motor de almacenamiento de Capacitor. También hay un asistente llamado useStorageItem que facilita la administración de un solo elemento si no necesita acceder a la API de almacenamiento completa (ver más abajo).
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 rastrea un solo elemento y proporciona una buena manera de leer y escribir ese elemento:
const [ name , setName ] = useStorageItem ( 'name' , 'Max' ) ;
// Example:
const updateName = useCallback ( ( n ) => {
setName ( n ) ;
} , [ setName ] ) ; useStorageItem utilizará el valor inicial que ya está almacenado, o el proporcionado si no existe ningún valor.
Consulte los documentos del complemento del condensador de almacenamiento para obtener más información sobre la API del complemento.
Este es un proyecto en evolución y no todos los complementos de Capacitor son compatibles todavía. Si hay uno que necesita, no dude en abrir un problema o, mejor aún, enviar un PR.
