需要时无法读取QRcode

Question

我正在使用react-native-qrcode-scanner库扫描条形码并返回其结果。 但是，它不会读取条形码并且不返回任何信息

    import React, { Component } from 'react';
import { View, Text, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
import QRCodeScanner from "react-native-qrcode-scanner";


export default class QRcodeScan extends Component {

  state = {
    id: ''
  };
  onSuccess = async (e) => {
    console.log(e)
    await this.setState({ id: e.data });
    console.log(this.state.id)
  };

  render () {

    return (
      <QRCodeScanner
      onRead={this.onSuccess}   
      topContent={
        <Text style={styles.centerText}>
          Go to <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on your computer and scan the QR code.
        </Text>
      }
      bottomContent={
        <TouchableOpacity style={styles.buttonTouchable}>
          <Text style={styles.buttonText}>OK. Got it!</Text>
        </TouchableOpacity>
      }
    />
  );
}
}
const styles = StyleSheet.create({
  centerText: {
    flex: 1,
    fontSize: 18,
    padding: 32,
    color: '#777',
  },
  textBold: {
    fontWeight: '500',
    color: '#000',
  },
  buttonText: {
    fontSize: 21,
    color: 'rgb(0,122,255)',
  },
  buttonTouchable: {
    padding: 16,
  },
});

• react-native-qrcode-scanner“：” ^ 1.3.1“
• react-native-permissions”：“ ^ 2.0.3”
• react-native-camera“：“ ^ 3.11.1”
• react-native“：” ^ 0.60.4“

Answer 1

如果已安装react-native-camera模块，则可以使用已安装的模块对其进行修复。

1. 您必须将以下权限添加到android/app/src/main/AndroidManifest.xml:

     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

2.您还需要在android/app/build.gradle设置尺寸策略

    defaultConfig {
         applicationId "com.example"
+        missingDimensionStrategy 'react-native-camera', 'general'

3.从App.js文件导入RNCamera 。

import { RNCamera } from 'react-native-camera';

4.使用onBarCodeRead组件扫描QRcode 。

  constructor(props) {
    super(props);
    this.state = {
      camera: {
        type: RNCamera.Constants.Type.back,
      }
    };
  }

  onBarCodeRead(scan) {
    console.warn(scan.type);
    console.warn(scan.data);
  }

 render() {
    return (
      <View style={styles.container}>
        <RNCamera
            ref={ref => {
              this.camera = ref;
            }}
            defaultTouchToFocus
            mirrorImage={false}
            onBarCodeRead={this.onBarCodeRead.bind(this)}
            type={this.state.camera.type}
        />
      </View>
    );
  }
}

Answer 2

我稍微修改了代码，一切恢复正常。 最终结果是这样的：

import React, { Component } from 'react';
import { View, Text, StatusBar } from 'react-native';
import QRCodeScanner from "react-native-qrcode-scanner";


    export default class QRcodeScan extends Component {
      render() {
        return (
          <View style={{backgroundColor:'#000', flex:1}}>
            <StatusBar backgroundColor='black' barStyle='light-content'/>
            <QRCodeScanner
              styles={{height:'100%'}}
              reactivate={true}
              onRead = { ( e )  => this.props.navigation.navigate('DetailQR', {id: e.data})}
              showMarker = {true}
            />
          </View>
        )
      }
    }