Quiero abrir/cerrar la luz de la antorcha del móvil cuando estoy alternando el botón de abajo...
<IconButton onClick={() => setFlashOn(!flashOn)} style={{ position: "absolute", right: 80, top: 20, zIndex: 2 }} > {flashOn ? ( <FlashButtonIcon width={44} height={44} /> ) : ( <FlashButtonEmptyIcon width={44} height={44} /> )} </IconButton>En este momento, solo estoy cambiando el color de relleno del botón cuando lo alterno.
¿Es posible con React?
¿Has intentado usar el gancho @blackbox-vision/use-torch-light ?
import React, { useState, useRef } from 'react'; import { useTorchLight } from '@blackbox-vision/use-torch-light'; const Test = (props) => { const [on, toggle] = useTorchLight(streamRef.current); return ( <> <button onClick={toggle}>{on ? 'Disable Torch' : 'Enable Torch'}</button> </> ); };Si ejecutar el siguiente comando de instalación genera un error:
npm i @blackbox-vision/use-torch-lightEs posible que deba instalar las dependencias de pares heredadas. Esto se debe a que las versiones de React de su proyecto no coinciden con las dependencias del módulo. En ese caso ejecutar:
npm i @blackbox-vision/use-torch-light --legacy-peer-deps Se basa en la API de ImageCapture , así que primero verifique la compatibilidad entre navegadores.
Es un tema complicado ya que la antorcha del dispositivo es una funcionalidad nativa y una solución integrada a través del navegador implicará un oyente de transmisión que puede conducir a la gestión de múltiples errores, es difícil, como se sugiere en:
Un complemento React Native simple para encender/apagar una linterna.
npm install --save react-native-torch react-native link react-native-torchSin verificación de permisos
import Torch from 'react-native-torch'; Torch.switchState(true); // Turn ON Torch.switchState(false); // Turn OFFCon verificación de permiso adicional y diálogo (solo Android)
import Torch from 'react-native-torch'; import { Platform } from 'react-native'; if (Platform.OS === 'ios') { Torch.switchState(this.isTorchOn); } else { const cameraAllowed = await Torch.requestCameraPermission( 'Camera Permissions', // dialog title 'We require camera permissions to use the torch on the back of your phone.' // dialog body ); if (cameraAllowed) { Torch.switchState(this.isTorchOn); } }Excepción de captura de Android al acceder a Torch, por ejemplo, en un emulador o si el dispositivo no tiene una antorcha
try { await Torch.switchState(newTorchState); this.setState({ isTorchOn: newTorchState }); } catch (e) { ToastAndroid.show( 'We seem to have an issue accessing your torch', ToastAndroid.SHORT ); }NOTA: iOS falla silenciosamente, en Android, aún puede llamar sin el bloque de prueba/captura y no provocará un bloqueo
La versión de Android tiene soporte de flujo.