ساخت QR Code Scanner در react native


QR Code که با Quick Response Code نیز شناخته میشه از یک کد بلوک ماتریس دوبعدی در قالب تصویر است.QR Cod شامل بلاک هایی مربعی شکل به رنگ مشکی با فضای سفید بین آن ها است.QR Code امروژه در اپلیکیشن های موبایل بسیار مفید است و عمدتا برای اسکن تصاویر و URL وب سایت ها مورد استفاده قرار میگیرد.بعد از اسکن QR Code در مرورگر URL مورد نظر باز می شود.در درس 35 دوره جامع نحوه ایجاد Qr Code در React Native رو توضیح دادیم که میتونید از این درس برای ایجاد Qr Code استفاده کنید.اما در این آموزش متنی قصد داریم یک QR Code Scanner با استفاده از Camera در React Native ایجاد کنیم.ما از کتابخانه react-native-camera-kit برای اسکن QR Code استفاده می کنیم.
یادداشت:برای ساخت Qr Code به صورت آنلاین میتونید از این سایت استفاده کنید
1.دایرکتوری پروژه خودتون رو در Command Prompt یا Terminal باز کنید و دستور زیر رو برای نصب کتابخانه react-native-camera-kit اجرا کنید.این دستور به صورت خودکار کتابخانه camera kit را دانلود و نصب می کند.
1 |
npm install react-native-camera-kit --save |
2.بعد از نصب موفقیت آمیز کتابختانه ما نیاز داریم که کتابخانه رو link کنیم.برای اینکار کافی است که دستور react–native link react–native–camera–kit را در دایرکتوری پروژه اجرا کنیم.همچنین میتونید کتابخانه رو به صورت دستی ب استفاده از داکیومنت link کنید.
3.فایل AndroidManifest.xml را در مسیر YourReactNativeProject -> android -> app -> src -> main -> AndroidManifest.xml YourReactNativeProject -> android -> app -> src -> main -> AndroidManifest.xml رو با استفاده از یک TextEditor باز کنید و CAMERA permission رو اضافه کنید.این دسترسی حتما برای استفاده از دوربین لازم است.
1 |
<uses-permission android:name="android.permission.CAMERA"/> |
کد کامل فایل AndroidManifest.xml بعد از تغییرات.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.project"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.CAMERA"/> <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application> </manifest> |
پیکربندی برای iOS Devices:
1. فایل project.xcodeproj را در مسیر Your_React_Native_project -> ios -> project.xcodeproj با XCode باز کنید.
2.فایل info.plist را باز کنید
3.بر روی آیکون plus در بالای Information Property List کلیک کنید.
4.دسترسی Privacy – Camera Usages Description رو مطابق اسکرین شات انتخاب کنید.اکنون یک جمله در مورد premission در روبروی آن بنویسید.
خب تا اینجا پیکربندی های لازم برای android و Ios رو انجام دادیم.
5.ایمپورت کامپوننت های StyleSheet, View, Text, Platform, TouchableOpacity, Linking و PermissionsAndroid در فایل App.js
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid } from 'react-native'; |
6.ایمپورت کامپوننت CameraKitCameraScreen از کتابخانه react-native-camera-kit .
1 |
import { CameraKitCameraScreen, } from 'react-native-camera-kit'; |
7.تعریف ()constructor برای کلاس App و تعریف دو state به نام های QR_Code_Value و Start_Scanner درون آن.
QR_Code_Value : مقدار QR code را بعد از اسکن نگهداری می کند.
Start_Scanner :برای نمایش و پنهان کردن QR code scanning استفاده می شود.
1 2 3 4 5 6 7 8 9 10 11 12 |
constructor() { super(); this.state = { QR_Code_Value: '', Start_Scanner: false, }; } |
8.ایجاد یک تابع به نام ()openLink_in_browser. درون این تابع ما URL اسکن شده را در مرورگر پیش فرض موبایل باز می کنیم.
1 2 3 4 5 |
openLink_in_browser = () => { Linking.openURL(this.state.QR_Code_Value); } |
9.ایجاد یک تابع به نام ()onQR_Code_Scan_Done.درون این تابع ما مقدار اسکن شده را در QR_Code_Value ذخیره و مقدار Start_Scanner را flase میکنیم تا دیگر اسکنر نمایش داده نشود.
1 2 3 4 5 6 |
onQR_Code_Scan_Done = (QR_Code) => { this.setState({ QR_Code_Value: QR_Code }); this.setState({ Start_Scanner: false }); } |
10.ایجاد یک تابع به نام ()open_QR_Code_Scanner.درون این تابع ابتدا ما اجازه دسترسی به دوربین را از کاربر میگیریم.در این تابع ما از API PermissionsAndroid استفاده می کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
open_QR_Code_Scanner=()=> { var that = this; if (Platform.OS === 'android') { async function requestCameraPermission() { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { 'title': 'Camera App Permission', 'message': 'Camera App needs access to your camera ' } ) if (granted === PermissionsAndroid.RESULTS.GRANTED) { that.setState({ QR_Code_Value: '' }); that.setState({ Start_Scanner: true }); } else { alert("CAMERA permission denied"); } } catch (err) { alert("Camera permission err", err); console.warn(err); } } requestCameraPermission(); } else { that.setState({ QR_Code_Value: '' }); that.setState({ Start_Scanner: true }); } } |
11.از عبارت شرطی IF در بلاک render’s استفاده می کنیم.در واقع ما با استفاده از IF مشخص میکنیم که اسکنر به کاربر نمایش داده شود یا اینکه کاربر URL اسکن شده را در مرورگر مشاهده کند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
render() { if (!this.state.Start_Scanner) { return ( <View style={styles.MainContainer}> <Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</Text> <Text style={styles.QR_text}> {this.state.QR_Code_Value ? 'Scanned QR Code: ' + this.state.QR_Code_Value : ''} </Text> {this.state.QR_Code_Value.includes("http") ? <TouchableOpacity onPress={this.openLink_in_browser} style={styles.button}> <Text style={{ color: '#FFF', fontSize: 14 }}>Open Link in default Browser</Text> </TouchableOpacity> : null } <TouchableOpacity onPress={this.open_QR_Code_Scanner} style={styles.button}> <Text style={{ color: '#FFF', fontSize: 14 }}> Open QR Scanner </Text> </TouchableOpacity> </View> ); } return ( <View style={{ flex: 1 }}> <CameraKitCameraScreen showFrame={true} scanBarcode={true} laserColor={'#FF3D00'} frameColor={'#00C853'} colorForScannerFrame={'black'} onReadCode={event => this.onQR_Code_Scan_Done(event.nativeEvent.codeStringValue) } /> </View> ); } |
12.ایجاد استایل.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : , alignItems: 'center', justifyContent: 'center', }, QR_text: { color: '#000', fontSize: 19, padding: 8, marginTop: 12 }, button: { backgroundColor: '#2979FF', alignItems: 'center', padding: 12, width: 300, marginTop: 14 }, }); |
13.کد کامل برنامه در فایل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid } from 'react-native'; import { CameraKitCameraScreen, } from 'react-native-camera-kit'; export default class App extends Component { constructor() { super(); this.state = { QR_Code_Value: '', Start_Scanner: false, }; } openLink_in_browser = () => { Linking.openURL(this.state.QR_Code_Value); } onQR_Code_Scan_Done = (QR_Code) => { this.setState({ QR_Code_Value: QR_Code }); this.setState({ Start_Scanner: false }); } open_QR_Code_Scanner=()=> { var that = this; if (Platform.OS === 'android') { async function requestCameraPermission() { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { 'title': 'Camera App Permission', 'message': 'Camera App needs access to your camera ' } ) if (granted === PermissionsAndroid.RESULTS.GRANTED) { that.setState({ QR_Code_Value: '' }); that.setState({ Start_Scanner: true }); } else { alert("CAMERA permission denied"); } } catch (err) { alert("Camera permission err", err); console.warn(err); } } requestCameraPermission(); } else { that.setState({ QR_Code_Value: '' }); that.setState({ Start_Scanner: true }); } } render() { if (!this.state.Start_Scanner) { return ( <View style={styles.MainContainer}> <Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</Text> <Text style={styles.QR_text}> {this.state.QR_Code_Value ? 'Scanned QR Code: ' + this.state.QR_Code_Value : ''} </Text> {this.state.QR_Code_Value.includes("http") ? <TouchableOpacity onPress={this.openLink_in_browser} style={styles.button}> <Text style={{ color: '#FFF', fontSize: 14 }}>Open Link in default Browser</Text> </TouchableOpacity> : null } <TouchableOpacity onPress={this.open_QR_Code_Scanner} style={styles.button}> <Text style={{ color: '#FFF', fontSize: 14 }}> Open QR Scanner </Text> </TouchableOpacity> </View> ); } return ( <View style={{ flex: 1 }}> <CameraKitCameraScreen showFrame={true} scanBarcode={true} laserColor={'#FF3D00'} frameColor={'#00C853'} colorForScannerFrame={'black'} onReadCode={event => this.onQR_Code_Scan_Done(event.nativeEvent.codeStringValue) } /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : , alignItems: 'center', justifyContent: 'center', }, QR_text: { color: '#000', fontSize: 19, padding: 8, marginTop: 12 }, button: { backgroundColor: '#2979FF', alignItems: 'center', padding: 12, width: 300, marginTop: 14 }, }); |
اسکرین شات:
دیدگاهتان را بنویسید