React Native，第39届世博会:使用世博会摄像头在Web上扫描条形码

Question

最近，世博会升级到了39版，他们声称你现在可以使用expo-camera：https://dev.to/expo/expo-sdk-39-is-now-available-1lm8在浏览器中扫描条形码

它在安卓和iOS上运行良好，但我仍然不能在浏览器中使用它(我知道我可以在网页上使用其他扫描库，但如果只使用一个库expo-camera就太好了)

是否有额外的配置？

我的package.json

...
dependencies: {
  ...,
  "expo": "~39.0.2",
  "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
  "react-native-web": "~0.13.12",
  "expo-camera": "~9.0.0",
  ...
}

MyCamera.tsx

import React, { useEffect, useState } from 'react';
import { useIsFocused } from '@react-navigation/native';
import { Platform, StyleSheet, Text } from 'react-native';
import { BarCodeScanningResult, Camera } from 'expo-camera';

function PPCamera() {
  // properties
  const [hasPermission, setHasPermission] = useState(false);
  const [scanned, setScanned] = useState(false);
  const isFocused = useIsFocused();
  let camera: Camera | null;

  // methods
  useEffect(() => {
    (async () => {
      if (Platform.OS === 'web') {
        setHasPermission(true);
      } else {
        const { status } = await Camera.requestPermissionsAsync();
        console.log({ status });

        setHasPermission(status === 'granted');
      }
    })();
  }, []);

  const handleBarCodeScanned = (scanResult: BarCodeScanningResult) => {
    console.log({ scanResult });
    const { type, data } = scanResult;
    setScanned(true);
    alert(data);
    setTimeout(() => {
      setScanned(false);
    }, 1000);
  };

  // render
  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    isFocused && (
      <Camera
        ref={(ref) => {
          camera = ref;
        }}
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
    )
  );
}

export default PPCamera;

const styles = StyleSheet.create({
  camera: {
    height: '80%',
    width: '100%',
    borderWidth: 2,
  },
});

组件在网络上工作，摄像头正在显示，但我就是得不到任何onBarCodeScanned事件。我甚至尝试过拍照，它在所有平台上都有效：let photo = await camera.takePictureAsync({ base64: true, quality: 0.5 });

谢谢!

Answer 1

在托管应用程序中，Camera需要

Permissions.CAMERA

在App.json文件中添加权限

链接- https://docs.expo.io/versions/v39.0.0/sdk/permissions/