# react-native-simple-scanner-qrcode

**Repository Path**: gdoudeng/react-native-simple-scanner-qrcode

## Basic Information

- **Project Name**: react-native-simple-scanner-qrcode
- **Description**: React-Native 扫码功能以及从相册读取二维码
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-06
- **Last Updated**: 2022-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#### ReactNative调用
---------------------

```javascript
        /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {  NativeModules,TouchableOpacity, Platform, StyleSheet, Text, View} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  _scanner=()=>{
    NativeModules.NaviModule.startQrcodeScanner().then(result=>{
      alert(result);
    }).catch(error=>{

    });
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._scanner}>
            <Text>扫描</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

```

首先来看看效果图
========

![输入图片说明](https://images.gitee.com/uploads/images/2020/0506/145352_f2c3727a_2344681.jpeg "微信图片_20200506145331.jpg")


>
使用方法
========


1.添加依赖
--------------------
先在 build.gradle(Project:XXXX) 的 repositories 添加``` maven { url 'https://jitpack.io' }```
一定要加上这个，否则会提示依赖失败

```
allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}
```

然后在 build.gradle(Module:app) 的 dependencies 添加:

最新版本：https://github.com/yuzhiqiang1993/zxing/releases
[![](https://jitpack.io/v/yuzhiqiang1993/zxing.svg)](https://jitpack.io/#yuzhiqiang1993/zxing)
 ```
 dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:26.1.0'
    
    /*添加依赖*/
    implementation 'com.github.yuzhiqiang1993:zxing:2.2.5'
}

 
 ```
 
 2.权限
 --------------
 
 demo使用的权限申请是严大的一个开源库，地址：https://github.com/yanzhenjie/AndPermission 感谢严大！
 
 需要申请的权限有：
 
   ```
   Manifest.permission.CAMERA
   Manifest.permission.READ_EXTERNAL_STORAGE
  
   ```
   
   
   项目中用到的所有权限
   
   ```
   <uses-permission android:name="android.permission.CAMERA" />
   <uses-permission android:name="android.permission.FLASHLIGHT" />
   <uses-feature android:name="android.hardware.camera" />
   <uses-feature android:name="android.hardware.camera.autofocus" />
   <uses-permission android:name="android.permission.VIBRATE" />
   <uses-permission android:name="android.permission.WAKE_LOCK" />
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   ```

 
3.跳转到扫一扫界面：
--------------

1.使用默认配置项，两行代码即可

```
Intent intent = new Intent(MainActivity.this, CaptureActivity.class);
startActivityForResult(intent, REQUEST_CODE_SCAN);
```

2.自定义配置项
```
Intent intent = new Intent(MainActivity.this, CaptureActivity.class);
/*ZxingConfig是配置类
*可以设置是否显示底部布局，闪光灯，相册，
* 是否播放提示音  震动
* 设置扫描框颜色等
* 也可以不传这个参数
* */
ZxingConfig config = new ZxingConfig();
config.setPlayBeep(true);//是否播放扫描声音 默认为true
config.setShake(true);//是否震动  默认为true
config.setDecodeBarCode(true);//是否扫描条形码 默认为true
config.setReactColor(R.color.colorAccent);//设置扫描框四个角的颜色 默认为白色
config.setFrameLineColor(R.color.colorAccent);//设置扫描框边框颜色 默认无色
config.setScanLineColor(R.color.colorAccent);//设置扫描线的颜色 默认白色
config.setFullScreenScan(false);//是否全屏扫描  默认为true  设为false则只会在扫描框中扫描
intent.putExtra(Constant.INTENT_ZXING_CONFIG, config);
startActivityForResult(intent, REQUEST_CODE_SCAN);

```

4.接收扫描结果
-------------------------------------------
注意：Constant.CODED_CONTENT引的是这个com.yzq.zxinglibrary.common.Constant

```
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        // 扫描二维码/条码回传
        if (requestCode == REQUEST_CODE_SCAN && resultCode == RESULT_OK) {
            if (data != null) {

                String content = data.getStringExtra(Constant.CODED_CONTENT);
                result.setText("扫描结果为：" + content);
            }
        }
    }

```

--------------------------