Question

在我的React本机项目中，我正在使用expo构建将扫描QR码的应用程序。因此，我使用此命令安装了以下软件包-

npm install expo-barcode-scanner

我遵循了小吃博览会中给出的以下示例-

https://snack.expo.io/BJlFFcp2g

当我在设备上运行此示例时，它可以工作。

但是在我的React-native项目中，当我复制 App.js 文件中给出的相同代码时，在运行该应用程序后，相机会打开，但在扫描时不会显示任何结果。

这是代码-

App.js

SCHEMA1.pre('save', function(){
    ......others

    variableName= schema2._id
})

Schema1.post('save', function(){
    SCHEMA1.schema2_foreign_field=variableName;//obtained from above
    SCHEMA1.save();
});

所以，我不明白-如何使QR码扫描仪正常工作？如果有人建议我解决这个问题或给我任何示例以便我可以实现，那将是非常好的。

Answer 1

我个人使用https://github.com/moaazsidat/react-native-qrcode-scanner的库进行QR码扫描取得了更大的成功。尝试一下可以解决您的问题吗？在这种情况下，我建议他们遵循README入门。

Answer 2

这是我的QR扫描仪的代码

import React, { Component } from 'react';
import { Alert, View, Text, Vibration, StyleSheet } from 'react-native';
import { Camera, BarCodeScanner, Permissions } from 'expo';

export default class ExpoScanner extends Component {
  constructor(props) {
    super(props);


    this.onBarCodeRead = this.onBarCodeRead.bind(this);
    this.renderMessage = this.renderMessage.bind(this);
    this.scannedCode = null;

    this.state = {
      hasCameraPermission: null,
      type: Camera.Constants.Type.back,
      id_cedulacli: '',
            placa:'',
            monto:'', 
            fecha_pago:'Seleccione fecha'   
    };
  }

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    await this.setState({hasCameraPermission: status === 'granted'});
    await this.resetScanner();
  }

  multaEdit = ({data, type}) =>{

    if ((type === this.state.scannedItem.type && data === this.state.scannedItem.data) || data === null) {
      return;
    }

    this.setState({ scannedItem: { data, type } });

    const {placa} = this.state;
    const {monto} = this.state;
    const {fecha_pago} = this.state;

    Vibration.vibrate();

    console.log(`EAN scanned: ${data}`);


  fetch('http://10.10.20.88/parciall/editarMul.php', {
    method: 'post',
    header:{
      'Accept': 'application/json',
      'Content-type': 'application/json'
    },          
    body:JSON.stringify({
      placa: placa,
      monto: monto,
      id_cedulacli: ''+`${data}`,
      fecha_pago: fecha_pago,
    })

  })
  .then((response) => response.json())
    .then((responseJson) =>{
      if(responseJson == "Actualización completada"){
        alert(responseJson);
        this.props.navigation.navigate("InicioScreen");
      }else{

        alert(responseJson);

      }             

          })

    .catch((error)=>{
      console.error(error);
    });

    this.props.navigation.navigate('Inicio', { ean: data });

  }

  renderAlert(title, message) {
    Alert.alert(
      title,
      message,
      [
        { text: 'OK', onPress: () => this.resetScanner() },
      ],
      { cancelable: true }
    );
  }

  onBarCodeRead({ type, data } ) {
    if ((type === this.state.scannedItem.type && data === this.state.scannedItem.data) || data === null) {
      return;
    }

    Vibration.vibrate();
    this.setState({ scannedItem: { data, type } });

      console.log(`EAN scanned: ${data}`);
  }

  renderMessage() {
    if (this.state.scannedItem && this.state.scannedItem.type) {
      const { type, data } = this.state.scannedItem;
      return (
        <Text style={styles.scanScreenMessage}>
          {`Scanned \n ${type} \n ${data}`}
        </Text>
      );
    }
    return <Text style={styles.scanScreenMessage}>Focus the barcode to scan.</Text>;
  }

  resetScanner() {
    this.scannedCode = null;
    this.setState({
      scannedItem: {
        type: null,
        data: null
      }
    });
  }

  render() {
    const { hasCameraPermission } = 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={styles.container}>
        <View style={{ flex: 1 }}>
          <BarCodeScanner
            onBarCodeScanned={this.multaEdit}
            style={StyleSheet.absoluteFill}
          />
          {this.renderMessage()}
        </View>
      </View>
    );
  }
}

如何在React Native中制作QR码扫描仪？

2 个答案: