expo-barcode-scanner 仅适用于 react-native 版本 0.64.2 和 expo 43.0.0答案

【问题标题】：expo-barcode-scanner only works once with react-native version 0.64.2 and expo 43.0.0expo-barcode-scanner 仅适用于 react-native 版本 0.64.2 和 expo 43.0.0
【发布时间】：2021-12-19 17:45:03
【问题描述】：

由于 Google Play，我不得不将我的一个旧项目更新到最新的 expo 版本（确切地说是版本 43.0.0）。这个想法是让应用程序简单地扫描二维码并处理数据。但是，expo-barcode-scanner 只能工作一次，之后我需要关闭并再次打开应用程序才能工作。有没有人遇到过这个问题并且（或）知道如何解决它？以下是我的代码：

{escaneando ? (
                        <BarCodeScanner
                            barCodeTypes={[
                                BarCodeScanner.Constants.BarCodeType.ean13,
                                BarCodeScanner.Constants.BarCodeType.ean8,
                                BarCodeScanner.Constants.BarCodeType.upc_a,
                                BarCodeScanner.Constants.BarCodeType.upc_e,
                            ]}
                            onBarCodeScanned={this.handleBarCode.bind(this)}
                            style={[StyleSheet.absoluteFillObject, styles.barscan]}
                        />
                    ) : null}

及库规范：

"@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^6.0.5",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "expo": "~43.0.0",
    "expo-av": "^10.1.3",
    "expo-barcode-scanner": "^11.1.2",
    "expo-status-bar": "~1.1.0",
    "lodash": "^4.17.21",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "^0.64.2",
    "react-native-dropdownalert": "^4.3.0",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-in-app-notification": "^3.2.0",
    "react-native-offline": "^6.0.0",
    "react-native-paper": "^4.10.0",
    "react-native-reanimated": "^2.2.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0",
    "react-native-web": "0.17.1",
    "react-navigation": "^4.4.4",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.0",
    "reselect": "^4.1.2"

【问题讨论】：

您也可以使用expo-camera 代替expo-barcode-scanner。 expo-camera 没有这个问题。它还提供更多选项，例如手电筒/手电筒和切换相机。

标签： react-native expo

【解决方案1】：

使用expo-camera 可以完美运行。

1)- 安装 expo-camera : expo install expo-camera

这是它的代码：

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';

const QrcodeReader = ({navigation}) =>  {

  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return(
  <View style={styles.container}>
      <Camera
        onBarCodeScanned={(...args) => {
          const data = args[0].data;
          result = JSON.stringify(result);
          console.log(result);
          navigation.navigate('your_next_screen',{result});
          );
        }}
        barCodeScannerSettings={{
          barCodeTypes: ['qr'],
        }}
        style={{ flex: 1 }}
      />
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    flexDirection: 'row',
    margin: 20,
  },
  button: {
    flex: 0.1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'white',
  },
});

export default QrcodeReader;

【讨论】：

【解决方案2】：

找到了这个解决方法：

编辑文件 BarCodeScannerViewFinder.kt 位于： [你的项目]\node_modules\expo-barcode-scanner\android\src\main\java\expo\modules\barcodescanner 在声明部分（第 44 行附近）添加以下两行：

@volatile 私有变量 barCodeScannerTaskLock = false

对我来说效果很好。

【讨论】：

【解决方案3】：

欢迎@Backup Gov18，

这是一个documented 问题。

注意：目前仅支持一个活动的 BarCodeScanner 预览。使用导航时，最佳做法是卸载任何以前呈现的 BarCodeScanner 组件，以便可以毫无问题地使用以下屏幕。

有一个解决方法。

您可以在另一个专用屏幕组件中渲染它，而不是有条件地渲染 <BarcodeScanner /> 组件。

这样，在新屏幕读取条形码后，您可以导航回第一个屏幕。向后导航可能会卸载这个新屏幕。如果需要，您可以强制卸载。

当你使用react-navigation时，你最好使用.pop()而不是goBack()。

另类

您也可以使用expo-camera 代替expo-barcode-scanner。 expo-camera 没有这个问题。它还提供更多选项，例如手电筒/手电筒和切换相机。

【讨论】：