时间戳

首页 > 解决方案 > 需要时未读取二维码

javascript - 需要时未读取二维码

问题描述

我正在使用 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,
  },
});

标签： javascriptreact-nativereact-native-androidqr-code

解决方案

如果您安装了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.RNCamera从App.js文件中导入。

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

4.使用组件扫描二维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>
    );
  }
}

推荐阅读