آموزش react native - ساخت qr code scanner

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 را دانلود و نصب می کند.

npm install react-native-camera-kit --save

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 رو اضافه کنید.این دسترسی حتما برای استفاده از دوربین لازم است.

<uses-permission android:name="android.permission.CAMERA"/>

1	<uses-permission android:name="android.permission.CAMERA"/>

کد کامل فایل AndroidManifest.xml بعد از تغییرات.

<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>

<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>

</intent-filter>

</activity>

</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

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

import React, { Component } from 'react';

import { StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid } from 'react-native';

6.ایمپورت کامپوننت CameraKitCameraScreen از کتابخانه react-native-camera-kit .

import { CameraKitCameraScreen, } from '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 استفاده می شود.

constructor() {
 
    super();
 
    this.state = {
 
      QR_Code_Value: '',
 
      Start_Scanner: false,
 
    };
  }

constructor() {

super();

this.state = {

QR_Code_Value: '',

Start_Scanner: false,

};

}

8.ایجاد یک تابع به نام ()openLink_in_browser. درون این تابع ما URL اسکن شده را در مرورگر پیش فرض موبایل باز می کنیم.

openLink_in_browser = () => {
 
    Linking.openURL(this.state.QR_Code_Value);
 
  }

openLink_in_browser = () => {

Linking.openURL(this.state.QR_Code_Value);

}

9.ایجاد یک تابع به نام ()onQR_Code_Scan_Done.درون این تابع ما مقدار اسکن شده را در QR_Code_Value ذخیره و مقدار Start_Scanner را flase میکنیم تا دیگر اسکنر نمایش داده نشود.

onQR_Code_Scan_Done = (QR_Code) => {
 
    this.setState({ QR_Code_Value: QR_Code });
 
    this.setState({ Start_Scanner: false });
  }

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 استفاده می کنیم.

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 });
    }
  }

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 اسکن شده را در مرورگر مشاهده کند.

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>
    );
  }

render() {

if (!this.state.Start_Scanner) {

return (

<Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</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}>

Open QR Scanner

</Text>

</TouchableOpacity>

</View>

);

}

return (

<CameraKitCameraScreen

showFrame={true}

scanBarcode={true}

laserColor={'#FF3D00'}

frameColor={'#00C853'}

colorForScannerFrame={'black'}

onReadCode={event =>

this.onQR_Code_Scan_Done(event.nativeEvent.codeStringValue)

}

</View>

);

}

12.ایجاد استایل.

اضافه کردن Icon درون Button در react native

const styles = StyleSheet.create({
 
  MainContainer: {
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    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
  },
});

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

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 : 0,
    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
  },
});

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 (

<Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</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}>

Open QR Scanner

</Text>

</TouchableOpacity>

</View>

);

}

return (

<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

});

اسکرین شات:

ساخت QR Code Scanner در react native

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ