# rntpc_react-native-qr-decode-image-camera
**Repository Path**: openharmony-sig/rntpc_react-native-qr-decode-image-camera
## Basic Information
- **Project Name**: rntpc_react-native-qr-decode-image-camera
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/openharmony-sig/rntpc_react-native-qr-decode-image-camera
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-14
- **Last Updated**: 2025-05-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 🚨 **重要提示 | IMPORTANT**
>
> **⚠️ 此代码仓已归档。新地址请访问 [rntpc_react-native-qr-decode-image-camera](https://gitcode.com/openharmony-sig/rntpc_react-native-qr-decode-image-camera)。| ⚠️ This repository has been archived. For the new address, please visit [rntpc_react-native-qr-decode-image-camera](https://gitcode.com/openharmony-sig/rntpc_react-native-qr-decode-image-camera).**
>
---
>
# react-native-qr-decode-image-camera
```bash
yarn add react-native-qr-decode-image-camera
or
npm install react-native-qr-decode-image-camera
run
npm install
```
## Install react native camera and give necessary permission
```bash
then run
cd ios
pod install
```
```bash
then
react-native run-android
or
react-native run-ios
```
# Example
```javascript
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity
} from "react-native";
import { QRscanner } from "react-native-qr-decode-image-camera";
export default class Scanner extends Component {
constructor(props) {
super(props);
this.state = {
flashMode: false,
zoom: 0.2
};
}
render() {
return (
);
}
bottomView = () => {
return (
this.setState({ flashMode: !this.state.flashMode })}
>
йоба-боба-функция
);
};
onRead = res => {
console.log(res);
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#000"
}
});
```
### QRreader
```javascript
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity
} from "react-native";
import { QRreader } from "react-native-qr-decode-image-camera";
import ImagePicker from "react-native-image-picker";
export default class Scanner extends Component {
constructor(props) {
super(props);
this.state = {
reader: {
message: null,
data: null
}
};
}
render() {
return (
{
this.openPhoto();
}}
>
просто кек бля
{!this.state.reader ? (
{!this.state.reader.message ? "" : `${this.state.reader.message}`}
) : (
{!this.state.reader.message
? ""
: `${this.state.reader.message}:${this.state.reader.data}`}
)}
);
}
openPhoto() {
console.log("ImagePicker");
ImagePicker.launchImageLibrary({}, response => {
console.log("Response = ", response);
if (response.didCancel) {
console.log("User cancelled image picker");
} else if (response.error) {
console.log("ImagePicker Error: ", response.error);
} else if (response.customButton) {
console.log("User tapped custom button: ", response.customButton);
} else {
if (response.uri) {
var path = response.path;
if (!path) {
path = response.uri;
}
QRreader(path)
.then(data => {
this.setState({
reader: {
message: "message",
data: data
}
});
setTimeout(() => {
this.setState({
reader: {
message: null,
data: null
}
});
}, 10000);
})
.catch(err => {
this.setState({
reader: {
message: "message",
data: null
}
});
});
}
}
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});
```
### QRscanner
| method | type | example | Remarks |
| ------------------ | ------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| isRepeatScan | boolean | false | whether to allow repeated scanning |
| zoom | number | 0 | Camera focal length range 0-1 |
| flashMode | bool | false | Turn on the flashlight |
| onRead | func | (res) => {} | scan callback |
| maskColor | string | '# 0000004D' | mask layer color |
| borderColor | string | '# 000000' | border color |
| cornerColor | string | '# 22ff00' | Color of corner of scan frame |
| borderWidth | number | 0 | border width of scan frame |
| cornerBorderWidth | number | 4 | border width of scan frame corner |
| cornerBorderLength | number | 20 | width and height of the corner of the scan frame |
| rectHeight | number | 200 | Scan frame height |
| rectWidth | number | 200 | Scan Frame Width |
| finderX | number | 0 | scan frame X axis offset |
| finderY | number | 0 | scan frame Y axis offset |
| isCornerOffset | bool | true | whether the corners are offset |
| cornerOffsetSize | number | 1 | offset |
| bottomHeight | number | 100 | Reserved height at the bottom |
| scanBarAnimateTime | number | 2500 | scan line time |
| scanBarColor | string | '# 22ff00' | scan line color |
| scanBarImage | any | null | scan line image |
| scanBarHeight | number | 1.5 | scan line height |
| scanBarMargin | number | 6 | scanline left and right margin |
| hintText | string | 'Put QR code / bar code into the box and scan it automatically' | |
| hintTextStyle | object | {color: '# fff', fontSize: 14, backgroundColor: 'transparent'} | hint string style |
| hintTextPosition | number | 130 | I dick knows that in this column the shot is written in Chinese understand it yourself))) | |
| renderTopView | func | () => {} | render top View |
| renderBottomView | func | () => | render bottom View |
| isShowScanBar | bool | true | whether to show scan lines |
| topViewStyle | object | null | render top container style |
| bottomViewStyle | object | null | render bottom container style |