世博条形码扫描仪在导航屏幕后停止工作

Question

因此，当我导航到扫描仪屏幕并返回上一个屏幕，然后再次导航到扫描仪屏幕时，我遇到了问题，条形码扫描仪无法工作。即使控制台日志也不起作用。我必须清除现金和世博应用程序中的所有数据才能再次工作扫描仪屏幕。我真的不知道是什么导致了这个问题，但对导航非常怀疑。有人可以帮我吗？我在下面添加了我的扫描仪屏幕。

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

我正在使用 axios.post 并认为这可能是问题的原因，但当我删除该代码块并再次运行时，它不会扫描二维码。

Answer 1

我遇到了同样的问题，我通过添加焦点事件的侦听器（当屏幕聚焦时发出）来修复它。

它看起来是这样的：

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

尝试使用此代码，看看它是否有效。

来源：https://reactnavigation.org/docs/navigation-events/#navigationaddlistener