需要时未读取二维码

Question

我正在使用 react-native-qrcode-scanner 库扫描条形码和 return 结果。但是它不读取条形码并且return没有信息

    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 模块，您可以使用安装的模块来修复它。

您必须将以下权限添加到 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.You还需要在android/app/build.gradle

中设置维度策略

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

3.import RNCamera 来自 App.js 文件。

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

4.Scan QRcode 使用 onBarCodeRead 组件。

  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>
        )
      }
    }

需要时未读取二维码

QRcode not being read when needed

javascript

qr-code

react-native

react-native-android