Quét mã Qrcode hoặc Barcode được ứng dụng rộng rãi trong các thanh toán online hiện nay. Trong bài này chúng ta sẽ tìm hiểu về cách tạo chức năng quét qrcode hoặc barcode trong dự án react-native sử dụng package là react-native-qrcode-scanner .

1.Cài đặt package react-native-qrcode-scanner

Trước tiên cài đặt dependencies react-native-camera:

npm install react-native-camera --save

Bây giờ cài package chính:

npm install react-native-qrcode-scanner --save

Tiếp theo, thêm cấu hình này rong file android/app/build.gradle

android {
 ...
 defaultConfig {
 ...
 missingDimensionStrategy 'react-native-camera', 'general' // thêm dòng này
 }
}

Sau đó cấp quyền cho việc xử lý máy ảnh, chạy lệnh sau:

npm install react-native-permissions --save

2.Sử dụng package

Để sử dụng package react-native-qrcode-scanner ta tạo 1 component tên là ScanScreen. Trong đó dùng thẻ <QRCodeScanner /> để hiển thị camera quét.

import React, { Component } from 'react';

import {
 AppRegistry,
 StyleSheet,
 Text,
 TouchableOpacity,
 Linking
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

class ScanScreen extends Component {
 onSuccess = e => {
 // Xử lý dữ liệu khi quét thành công tại đây.
 };

 render() {
 return (
 <QRCodeScanner
 onRead={this.onSuccess}
 flashMode={RNCamera.Constants.FlashMode.torch}
 topContent={
 <Text style={styles.centerText}>
 Phía trên camera
 </Text>
 }
 bottomContent={
 <TouchableOpacity style={styles.buttonTouchable}>
 <Text style={styles.buttonText}>Phía dưới camera</Text>
 </TouchableOpacity>
 }
 />
 );
 }
}

const styles = StyleSheet.create({
 centerText: {
 flex: 1,
 fontSize: 18,
 padding: 32,
 color: '#777'
 },
 textBold: {
 fontWeight: '500',
 color: '#000'
 },
 buttonText: {
 fontSize: 21,
 color: 'rgb(0,122,255)'
 },
 buttonTouchable: {
 padding: 16
 }
});

export defautl ScanScreen;

Cuối cùng, import component ở trên tại nơi ta muốn hiển thị, ở đây là component App.

function App() {

 return (
 <View style={styles.wrapCamera}>
 <ScanScreen />
 </View>
 );
}

const styles = StyleSheet.create({
 wrapCamera: {
 height: 700,
 width: "100%",
 position: "absolute",
 top: 0,
 left: 0,
 right: 0,
 zIndex: 9999,
 backgroundColor: "black"
 },
})

Như vậy, ta đã có thể tạo chức năng qúet Qrcode đơn giản thông qua package react-native-qrcode-scanner . Để tìm hiểu thêm các thuộc tính của package vui lòng xem tại đây

Tham gia các khoá học nâng cao tại đây:

• Khoá học Frontend: tại đậy
• Khoá học Backend: tại đây
• Khoá học Fullstack: tại đây
• Khoá học React-native: tại đây