Entonces, tengo un problema cuando navego a la pantalla de mi escáner y vuelvo a la pantalla anterior, luego navego nuevamente a la pantalla de mi escáner, el escáner de código de barras no funciona. incluso los registros de la consola no funcionan. Tengo que borrar el efectivo y todos los datos de la aplicación expo para que la pantalla del escáner vuelva a funcionar. Realmente no sé qué está causando el problema, pero sospecho mucho sobre la navegación. ¿Alguien puede ayudarme por favor? Estoy agregando mi pantalla de escáner justo debajo.
import React, { useState, useEffect } from "react"; import { Text, View, FlatList, Button, Modal, Pressable, Alert, StyleSheet, } from "react-native"; import { BarCodeScanner } from "expo-barcode-scanner"; import axios from "axios"; import { localIP, ngrokServer } from "../constants"; import allStyles from "../components/molecules/Styles"; const styles = allStyles; export default function ScannerScreen({ navigation }) { const [hasPermission, setHasPermission] = useState(null); const [scanned, setScanned] = useState(false); useEffect(() => { setReset(false); }); useEffect(() => { (async () => { const { status } = await BarCodeScanner.requestPermissionsAsync(); setHasPermission(status === "granted"); })(); }, []); const handleBarCodeScanned = async ({ type, data }) => { setScanned(true); console.log("Data: ", data); }; if (hasPermission === null) { return <Text>Requesting for camera permission</Text>; } if (hasPermission === false) { return <Text>No access to camera</Text>; } return ( <View style={styles.scannerScreenContainer}> <BarCodeScanner onBarCodeScanned={scanned ? undefined : handleBarCodeScanned} style={StyleSheet.absoluteFillObject} /> {scanned && reset && ( <Button title={"Tap to Scan Again"} onPress={() => setScanned(false)} /> )} </View> ); }Estoy usando axios.post y pensé que tal vez esa era la causa del problema, pero cuando eliminé ese bloque de código y lo ejecuté de nuevo, no escanea el código QR.
Tuve el mismo problema y lo solucioné agregando un oyente para eventos de enfoque (emitidos cuando la pantalla se enfoca).
Esto es lo que parece:
useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { // do something - for example: reset states, ask for camera permission setScanned(false); setHasPermission(false); (async () => { const { status } = await BarCodeScanner.requestPermissionsAsync(); setHasPermission(status === "granted"); })(); }); // Return the function to unsubscribe from the event so it gets removed on unmount return unsubscribe; }, [navigation]);Intente usar este código y vea si funciona.
Fuente: https://reactnavigation.org/docs/navigation-events/#navigationaddlistener