反应本机相机无法按预期与 expo 一起工作

Posted 2023-03-11

【中文标题】反应本机相机无法按预期与 expo 一起工作

【英文标题】：React native camera not working as expected with expo

【发布时间】：2019-07-10 17:04:38

【问题描述】：

我想用 react native 制作一个 qrcode 阅读器，我正在使用 expo。我正在按照此处基于官方文档的指南进行操作：react-native-qrcode-scanner

我通过运行npm install react-native-camera --save 成功安装了react-native-camera，以下是控制台中的命令react-native link react-native-camera，它给了我以下错误： 通过阅读文档，如果发现很多事情都依赖于react-native link，比如react-native link react-native-qrcode-scanner react-native link react-native-permissions，然后还有一些配置，比如<uses-permission android:name="android.permission.VIBRATE"/>，因为我不使用react-native-cli，所以我不能这样做。

【参考方案1】：

Expo 已经有你想要的了。 expo-barcode-scanner

如果您的 Expo 版本是 33，则应单独下载。

你可以运行expo install expo-barcode-scanner

您必须先请求permission 访问用户的摄像头，然后才能尝试获取它。为此，您需要使用Permissions API。您可以在以下示例中看到这一点。

基本示例

import * as React from 'react';
import  Text, View, StyleSheet, Button  from 'react-native';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';

import  BarCodeScanner  from 'expo-barcode-scanner';

export default class BarcodeScannerExample extends React.Component 
  state = 
    hasCameraPermission: null,
    scanned: false,
  ;

  async componentDidMount() 
    this.getPermissionsAsync();
  

  getPermissionsAsync = async () => 
    const  status  = await Permissions.askAsync(Permissions.CAMERA);
    this.setState( hasCameraPermission: status === 'granted' );
  ;

  render() 
    const  hasCameraPermission, scanned  = this.state;

    if (hasCameraPermission === null) 
      return <Text>Requesting for camera permission</Text>;
    
    if (hasCameraPermission === false) 
      return <Text>No access to camera</Text>;
    
    return (
      <View
        style=
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'flex-end',
        >
        <BarCodeScanner
          onBarCodeScanned=scanned ? undefined : this.handleBarCodeScanned
          style=StyleSheet.absoluteFillObject
        />

        scanned && (
          <Button title='Tap to Scan Again' onPress=() => this.setState( scanned: false ) />
        )
      </View>
    );
  

  handleBarCodeScanned = ( type, data ) => 
    this.setState( scanned: true );
    alert(`Bar code with type $type and data $data has been scanned!`);
  ;

道具

onBarCodeScanned（函数）

成功扫描条形码时调用的回调。回调提供了一个形状为 type: BarCodeScanner.Constants.BarCodeType, data: string 的对象，其中类型是指被扫描的条形码类型，数据是条形码中编码的信息（在这种情况下，二维码通常是一个 URL ）。有关支持的值，请参阅 BarCodeScanner.Constants.BarCodeType。

barCodeTypes（数组）

条形码类型的数组。用法：BarCodeScanner.Constants.BarCodeType.<codeType> 其中codeType 是上面列出的之一。默认值：所有支持的条码类型。例如：

barCodeTypes=[BarCodeScanner.Constants.BarCodeType.qr]

类型（字符串）

-- 相机朝向。使用BarCodeScanner.Constants.Type 之一。使用Type.front 或Type.back。与Camera.Constants.Type 相同。默认值：Type.back。

注意：将undefined 传递给onBarCodeScanned 属性将导致不扫描。这可用于有效地“暂停”扫描仪，使其即使在检索到数据后也不会继续扫描。

【参考方案2】：

如果您使用 expo，您将拥有 npx。您可以使用 npx 运行任何 react-native 命令。因此：

npx react-native 链接 react-native-camera