React Native 项目调试 之二维码扫描

React Native开发官网: https://reactnative.cn/docs/0.51/running-on-device-android.html#content

转载：https://www.cnblogs.com/zhangdw/p/6197240.html

1.前言

今天介绍React Native来实现二维码扫描的功能。首先我们要借助第三方插件 react-native-barcode-scanner-universal 来实现跨平台二维码扫描。

2.介绍

react-native-barcode-scanner-universal

react-native-barcode-scanner-universal是react-native-barcodescanner和react-native-camera的结合，react-native-barcodescanner应用于android平台，react-native-camera应用于iOS平台。

3.使用实例

1）安装：npm install  react-native-barcode-scanner-universal --save

2) 关联native库：react-native-barcodescanner 和 react-native-camera

which rnpm || npm install -g rnpm
rnpm link react-native-camera
rnpm link react-native-barcodescanner

  第2步自动关联，输入 rnpm link;有些同学会提示找到不到rnpm这个命令，你有两种解决方案：

第一、输入 npm i -g rnpm --save先安装rnpm，然后再输入rnpm link自动添加依赖；

第二、不用安装rnpm，直接输入 react-native link一样可以添加依赖。

3）关联成功后，需要修改Android工程下的MainApplication.java代码

import com.eguma.barcodescanner.BarcodeScannerPackage;//导入

public class MainApplication extends Application implements ReactApplication {
    // (...)

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new BarcodeScannerPackage() // add this statement
      );
    }
}

4) react native中使用

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import BarcodeScanner from 'react-native-barcode-scanner-universal'

export default class qrcode extends Component {
　//解析数据
  parseData(pdata){
      var ptype = pdata.type;
      var data = pdata.data;

      fetch(data)
          .then((response) => response.json())
          .then((responseJson) => {
              console.log(responseJson);
          })
          .catch((error) => {
              console.error(error);
          });
  }

  render() {
    let scanArea = null
    scanArea = (
        <View style={styles.rectangleContainer}>
          <View style={styles.rectangle} />
        </View>
    )

    return (
      <BarcodeScanner
        onBarCodeRead={  this.parseData.bind(this)  }
        style={styles.camera}
      >
        {scanArea}
      </BarcodeScanner>
    );
  }
}

const styles = StyleSheet.create({
    camera: {
    flex: 1
  },
    rectangleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
    rectangle: {
    height: 250,
    width: 250,
    borderWidth: 2,
    borderColor: '#00FF00',
    backgroundColor: 'transparent'
  }
});

4) 摇晃设备，或者运行adb shell input keyevent 82，打开开发者菜单。

1. 点击进入Dev Settings。
2. 点击Debug server host for device。
3. 输入你电脑的IP地址和端口号（譬如192.0.1.1:8081）
   1. 打开命令提示符并输入ipconfig来查询你的IP地址。
   2. 回到开发者菜单然后选择Reload JS。

4.效果

扫描成功后打印的数据