{"id":16797906,"url":"https://github.com/shifeng1993/react-native-qr-scanner","last_synced_at":"2025-04-09T20:05:21.154Z","repository":{"id":28265373,"uuid":"117783121","full_name":"shifeng1993/react-native-qr-scanner","owner":"shifeng1993","description":"一个二维码扫描组件，依赖react-native-camera","archived":false,"fork":false,"pushed_at":"2023-06-13T03:07:53.000Z","size":1161,"stargazers_count":116,"open_issues_count":46,"forks_count":65,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T20:05:14.838Z","etag":null,"topics":["qr","qrcode","react-native","react-native-qr","react-native-qr-scanner"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shifeng1993.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-17T04:18:43.000Z","updated_at":"2024-08-22T09:03:22.000Z","dependencies_parsed_at":"2024-06-21T13:10:58.865Z","dependency_job_id":"37996d44-b073-4fc4-864d-7256c17d3adb","html_url":"https://github.com/shifeng1993/react-native-qr-scanner","commit_stats":{"total_commits":42,"total_committers":1,"mean_commits":42.0,"dds":0.0,"last_synced_commit":"ceaec8ae6abd1bb60d2dcc63bcb0233446848fb1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shifeng1993%2Freact-native-qr-scanner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shifeng1993%2Freact-native-qr-scanner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shifeng1993%2Freact-native-qr-scanner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shifeng1993%2Freact-native-qr-scanner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shifeng1993","download_url":"https://codeload.github.com/shifeng1993/react-native-qr-scanner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103870,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["qr","qrcode","react-native","react-native-qr","react-native-qr-scanner"],"created_at":"2024-10-13T09:23:56.299Z","updated_at":"2025-04-09T20:05:21.130Z","avatar_url":"https://github.com/shifeng1993.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-qr-scanner\n[![NPM Version](https://img.shields.io/npm/v/react-native-qr-scanner.svg?style=flat)](https://www.npmjs.com/package/react-native-qr-scanner)\n  [![License](http://img.shields.io/npm/l/react-native-qr-scanner.svg?style=flat)](https://github.com/shifeng1993/react-native-qr-scanner/blob/master/LICENSE)\n\n一个react-native的二维码扫描组件，支持扫描区域的限制以及扫描区域的偏移。\n\n## 安装步骤：\n\n### 安装依赖\n```bash\nyarn add react-native-camera react-native-qr-scanner\n```\n\n### link依赖到native \n```bash\nreact-native link react-native-camera \u0026\u0026 react-native-qr-scanner\n```\n\n### 添加相机权限：\n- ios在 `ios/projectName/Info.plist`:\n```xml\n\u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n\u003cstring/\u003e\n\u003ckey\u003eNSPhotoLibraryUsageDescription\u003c/key\u003e\n\u003cstring/\u003e\n\u003ckey\u003eNSMicrophoneUsageDescription\u003c/key\u003e\n\u003cstring/\u003e\n\u003ckey\u003eNSPhotoLibraryAddUsageDescription\u003c/key\u003e\n\u003cstring/\u003e\n```\n- android在 `android/app/src/main/AndroidManifest.xml`:\n```xml\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n\u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\"/\u003e\n\u003cuses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.VIBRATE\"/\u003e\n```\n\n#### 修复相机组件找不到google()方法的错误\n\nhttps://github.com/react-native-community/react-native-camera/blob/master/docs/GradleUpgradeGuide.md\n\n## 使用组件\n\n### 扫描\n```javascript\nimport React, {Component} from 'react';\nimport {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';\nimport {QRscanner} from 'react-native-qr-scanner';\n\nexport default class Scanner extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      flashMode: false,\n      zoom: 0.2\n    };\n  }\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cQRscanner onRead={this.onRead} renderBottomView={this.bottomView} flashMode={this.state.flashMode} zoom={this.state.zoom} finderY={50}/\u003e\n      \u003c/View\u003e\n    );\n  }\n  bottomView = ()=\u003e{\n    return(\n    \u003cView style={{flex:1,flexDirection:'row',backgroundColor:'#0000004D'}}\u003e\n      \u003cTouchableOpacity style={{flex:1,alignItems:'center', justifyContent:'center'}} onPress={()=\u003ethis.setState({flashMode:!this.state.flashMode})}\u003e\n        \u003cText style={{color:'#fff'}}\u003e点我开启/关闭手电筒\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/View\u003e\n    );\n  }\n  onRead = (res) =\u003e {\n    console.log(res);\n  }\n}\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#000'\n  }\n});\n```\n\n### 识别\n```javascript\nimport React, {Component} from 'react';\nimport {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';\nimport {QRreader} from 'react-native-qr-scanner';\nimport ImagePicker from 'react-native-image-picker';\n\nexport default class Scanner extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      reader: {\n        message: null,\n        data: null\n      }\n    };\n  }\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cTouchableOpacity onPress={()=\u003e{\n          this.openPhoto();\n        }}\u003e\n          \u003cText style={{marginTop: 20}}\u003e打开相册识别二维码\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n        \u003cView\u003e\n        {!this.state.reader? \u003cText\u003e{!this.state.reader.message?'':`${this.state.reader.message}`}\u003c/Text\u003e: \u003cText\u003e{!this.state.reader.message?'':`${this.state.reader.message}:${this.state.reader.data}`}\u003c/Text\u003e}\n        \u003c/View\u003e\n      \u003c/View\u003e\n    );\n  }\n  \n  openPhoto(){\n    console.log('ImagePicker');\n    ImagePicker.launchImageLibrary({}, (response) =\u003e {\n      console.log('Response = ', response);\n    \n      if (response.didCancel) {\n        console.log('User cancelled image picker');\n      }\n      else if (response.error) {\n        console.log('ImagePicker Error: ', response.error);\n      }\n      else if (response.customButton) {\n        console.log('User tapped custom button: ', response.customButton);\n      }\n      else {\n        if(response.uri){\n          var path = response.path;\n          if(!path){\n              path = response.uri;\n          }\n          QRreader(path).then((data)=\u003e{\n            this.setState({reader: {\n              message: '识别成功',\n              data: data\n            }});\n            // 十秒后自动清空\n            setTimeout(() =\u003e {\n              this.setState({reader: {\n                message: null,\n                data: null\n              }})\n            }, 10000);\n          }).catch((err)=\u003e{\n            this.setState({reader: {\n              message: '识别失败',\n              data: null\n            }});\n          });\n          \n      }\n      }\n    });\n  }\n}\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff'\n  }\n});\n```\n\n## 运行示例\n```bash\n$ cd example\n$ yarn\n$ react-native run-ios  或者 $ react-native run-android  \n```\n示例中代码已link过，所以不用link\n\n### QRscanner\n| 属性                | 类型    | 默认值          | 备注 |\n| -------------      | ------- | -------------  | ------------- |\n| isRepeatScan       | boolean    | false          |   是否允许重复扫描  |\n| zoom          | number    | 0          |   相机焦距 范围0-1  |\n| flashMode          | bool    | false          |   开启手电筒  |\n| onRead             | func    | (res)=\u003e{}      | 扫描回调 |\n| maskColor          | string  | '#0000004D'    | 遮罩层颜色  |\n| borderColor        | string  | '#000000'      | 边框颜色  |\n| cornerColor        | string  | '#22ff00'      | 扫描框转角的颜色  |\n| borderWidth        | number  | 0              | 扫描框的边框宽度  |\n| cornerBorderWidth  | number  | 4              | 扫描框转角的border宽度  |\n| cornerBorderLength | number  | 20             | 扫描框转角的宽度高度  |\n| rectHeight         | number  | 200            | 扫描框高度  |\n| rectWidth          | number  | 200            | 扫描框宽度  |\n| finderX             | number  | 0            | 扫描框X轴偏移量  |\n| finderY             | number  | 0            | 扫描框Y轴偏移量  |\n| isCornerOffset     | bool    | true           | 边角是否偏移  |\n| cornerOffsetSize   | number  | 1              | 偏移量  |\n| bottomHeight       | number  | 100            | 底部预留高度  |\n| scanBarAnimateTime | number  | 2500           | 扫描线时间  |\n| scanBarColor       | string  | '#22ff00'      | 扫描线颜色  |\n| scanBarImage       | any     | null           | 扫描线图片  |\n| scanBarHeight      | number  | 1.5            | 扫描线高度  |\n| scanBarMargin      | number  | 6              | 扫描线左右margin  |\n| hintText           | string  | '将二维码/条码放入框内，即可自动扫描'| 提示字符串  |\n| hintTextStyle      | object  | {color: '#fff',fontSize: 14,backgroundColor: 'transparent'} | 提示字符串样式  |\n| hintTextPosition   | number  | 130            | 提示字符串距离容器底部的值  |\n| renderTopView      | func    | () =\u003e{}        | render顶部View  |\n| renderBottomView   | func    | ()=\u003e\u003cView style={{flex:1,backgroundColor:'#0000004D'}}/\u003e | render底部View  |\n| isShowScanBar      | bool    | true           | 是否显示扫描线  |\n| topViewStyle       | object  | null           | render顶部容器样式  |\n| bottomViewStyle    | object  | null           | render底部容器样式  |    \n\n### QRreader\nQRreader(path:uri)是一个promise对象，接受一个uri图片路径参数，\n返回成功识别的对象，失败则返回错误\n\n\n## 历史版本特性\n#### 1.3.2  因android扫描区域计算有诸多问题，所以注释掉android计算扫描区域，恢复android设备的全屏扫描。\n#### 1.3.1  修复ios打包发生的找不到库的错误,降低相册二维码识别的ios最低版本支持\n#### 1.3.0  修复android扫描的一个bug，加入相册二维码识别，感谢lewin大神的开源二维码识别。\n#### 1.2.4  限制扫码类型，修复android报错\n#### 1.2.2  添加是否允许重复扫描的api\n#### 1.2.1  修复android的报错以及android扫描区域的bug\n#### 1.2.0  修改底层依赖相机组件，添加扫描区域，并设置XY轴偏移量\n#### 1.1.3  完善文档\n#### 1.1.2  git保留demo示例，npm包去掉demo示例\n#### 1.1.1  修改文档错误地方，新增demo示例\n#### 1.1.0  修复bug，新增手电筒api\n#### 1.0.0  上传基础组件\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshifeng1993%2Freact-native-qr-scanner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshifeng1993%2Freact-native-qr-scanner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshifeng1993%2Freact-native-qr-scanner/lists"}