react-native - React Native，世博会 39 : Scan barcodes using expo-camera in Web

Question

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

它适用于 Android 和 iOS，但我仍然无法在浏览器中使用它(我知道我可以使用其他 Web 扫描库，但只使用一个库 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,
  },
});

该组件在 Web 上工作并且相机正在显示，但我没有收到任何 onBarCodeScanned 事件。我什至尝试拍照，它适用于所有平台:let photo = await camera.takePictureAsync({ base64: true, quality: 0.5 });

谢谢!

Answer 1

在托管应用中，相机需要

权限.CAMERA

在 App.json 文件中添加权限 链接 - https://docs.expo.io/versions/v39.0.0/sdk/permissions/