首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在React原生中制作二维码扫描器?

如何在React原生中制作二维码扫描器?
EN

Stack Overflow用户
提问于 2019-06-12 23:21:22
回答 2查看 6.5K关注 0票数 0

在我的React原生项目中,我正在使用expo构建一个将扫描二维码的应用程序。出于这个原因,我使用以下命令安装了以下软件包-

npm安装expo-条形码-扫描仪

我遵循了以下零食展示会的例子-

https://snack.expo.io/BJlFFcp2g

当我在我的设备上运行这个例子时,它可以工作。

但在我的React原生项目中,当我复制App.js文件中给出的相同代码时,在运行应用程序后,相机会打开,但扫描时没有显示任何结果。

这是代码-

App.js

import React, { Component } from 'react';
import { Alert, Linking, Dimensions, LayoutAnimation, Text, View, StatusBar, StyleSheet, TouchableOpacity } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

export default class App extends Component {
  state = {
    hasCameraPermission: null,
    lastScannedUrl: null,
  };

  componentDidMount() {
    this._requestCameraPermission();
  }

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

  _handleBarCodeRead = result => {
    if (result.data !== this.state.lastScannedUrl) {
      LayoutAnimation.spring();
      this.setState({ lastScannedUrl: result.data });
    }
  };

  render() {
    return (
      <View style={styles.container}>

        {this.state.hasCameraPermission === null
          ? <Text>Requesting for camera permission</Text>
          : this.state.hasCameraPermission === false
              ? <Text style={{ color: '#fff' }}>
                  Camera permission is not granted
                </Text>
              : <BarCodeScanner
                  onBarCodeRead={this._handleBarCodeRead}
                  style={{
                    height: Dimensions.get('window').height,
                    width: Dimensions.get('window').width,
                  }}
                />}

        {this._maybeRenderUrl()}

        <StatusBar hidden />
      </View>
    );
  }

  _handlePressUrl = () => {
    Alert.alert(
      'Open this URL?',
      this.state.lastScannedUrl,
      [
        {
          text: 'Yes',
          onPress: () => Linking.openURL(this.state.lastScannedUrl),
        },
        { text: 'No', onPress: () => {} },
      ],
      { cancellable: false }
    );
  };

  _handlePressCancel = () => {
    this.setState({ lastScannedUrl: null });
  };

  _maybeRenderUrl = () => {
    if (!this.state.lastScannedUrl) {
      return;
    }

    return (
      <View style={styles.bottomBar}>
        <TouchableOpacity style={styles.url} onPress={this._handlePressUrl}>
          <Text numberOfLines={1} style={styles.urlText}>
            {this.state.lastScannedUrl}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.cancelButton}
          onPress={this._handlePressCancel}>
          <Text style={styles.cancelButtonText}>
            Cancel
          </Text>
        </TouchableOpacity>
      </View>
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
  },
  bottomBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
    padding: 15,
    flexDirection: 'row',
  },
  url: {
    flex: 1,
  },
  urlText: {
    color: '#fff',
    fontSize: 20,
  },
  cancelButton: {
    marginLeft: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cancelButtonText: {
    color: 'rgba(255,255,255,0.8)',
    fontSize: 18,
  },
});

所以,我不明白-我应该怎么做才能让二维码扫描器工作?如果有人建议我解决这个问题,或者给我任何例子,这样我就可以实现它,那就太好了。

EN

回答 2

Stack Overflow用户

发布于 2019-06-13 03:38:28

我个人在使用https://github.com/moaazsidat/react-native-qrcode-scanner的库进行二维码扫描方面取得了更大的成功。试一试可能会解决你的问题?他们在自述文件中有一个入门指南,在这种情况下,我建议遵循这个指南。

票数 0
EN

Stack Overflow用户

发布于 2019-06-14 00:47:00

这是我的二维码扫描仪

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>
    );
  }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56565602

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档