Question

我想制作一个具有本机反应的qrcode读取器，并且我正在使用expo。我正在根据基于此处的官方文档的指南进行操作：react-native-qrcode-scanner

我通过运行react-native-camera成功安装了npm install react-native-camera --save，以下是控制台中的命令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"/>这样的配置，因为我不使用{{1}而无法执行}。

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码的情况下，通常是网址）。有关受支持的值，请参见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道具将不会进行扫描。这可以用来有效地“暂停”扫描器，以便即使在检索到数据后也不会持续扫描。

Answer 2

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

npx react-native链接react-native-camera

React Native相机无法在Expo上正常工作

2 个答案: