React 本机相机无法按预期与世博会一起工作

Question

我想用 React Native 制作一个二维码 reader，我正在使用 expo.I 遵循基于此处官方文档的指南：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.

Answer 1

你要的世博都有。 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 } 的对象，其中类型是指扫描的条形码类型，数据是条形码中编码的信息（在 QR 码的情况下，这通常是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 属性将导致不进行扫描。这可用于有效地 "pause" 扫描仪，即使在检索到数据后它也不会继续扫描。

Answer 2

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

npx react-native link react-native-camera

React 本机相机无法按预期与世博会一起工作

React native camera not working as expected with expo

react-native

react-native-camera

react-native-android

expo