QR kód je oblíbený díky své velké úložné kapacitě a schopnosti okamžité čitelnosti. V současné době většina aplikací používá QR kódy pro identifikaci zboží, sledování a dokonce i marketing.
Začínáme
Několik aplikací pro skenování QR kódů skenuje produkty v supermarketech, čte identifikační čísla z pasů a odečítá registrační značku vozidla. Poskytuje snadný způsob, jak rozpoznat produkty namísto zadávání dlouhých 16 číslic z čárových kódů.
React-Native má balíček npm s otevřeným zdrojovým kódem nazvaný reakt-native-qrcode-scanner pro provádění skenování QR kódu. Následuje seznam zásuvných modulů pro skenování a funkcí, které můžete implementovat pomocí React-native.
- react-native-qrcode-scanner
- react-native-scan-view
- react-native-camera
Myšlenkou tohoto článku je vyvinout aplikaci pro skenování QR kódu pomocí nativního Reactu.
Krok 1:Vytvořte svůj projekt v nativním prostředí reakce
Pojďme vytvořit projekt v reakce nativní.
Pokud jste v reagování nativních novinek, můžete si prolétnout následující článek, abyste se dostali do kontaktu se závislostmi a nastavením prostředí reaktantu spolu s ukázkou aplikace hello world.
Vyvíjejte aplikaci hello world v React native
Otevřete terminál a spusťte níže uvedené příkazy k vytvoření nativního projektu reakce.
create-react-native-app qrcode-scanner-app
cd qrcode-scanner-app
react-native run-android
Krok 2:Přidejte své závislosti
Nainstalujte do projektu závislosti skenování QRCode.
yarn add react-native-camera@git+https://[email protected]/react-native-community/react-native-camera.git
yarn add react-native-qrcode-scanner
Chcete-li použít react-native-qrcode-scanner
, importujte modul a použijte <QRCodeScanner />
tag ve vaší komponentě.
Krok 3:Přidání oprávnění
Chcete-li získat přístup k fotoaparátu, přidejte do souboru AndroidManifest.xml následující kód.
<uses-permission android:name="android.permission.CAMERA" />
Krok 4:Implementace skeneru QR Code
Abychom mohli zavolat metodu QRCode, vytvořte krásný pohled kliknutím na tlačítko zachycení. Vytvoříme komponentu nazvanou Skenovat pro skenování QR kódu pomocí reakt-nativního-qrcode-scanneru
scan.js
import React, { Component, Fragment } from 'react';
import { TouchableOpacity, Text, Linking, View, Image, ImageBackground, BackHandler } from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import styles from './scanStyle';
class Scan extends Component {
constructor(props) {
super(props);
this.state = {
scan: false,
ScanResult: false,
result: null
};
}
onSuccess = (e) => {
const check = e.data.substring(0, 4);
console.log('scanned data' + check);
this.setState({
result: e,
scan: false,
ScanResult: true
})
if (check === 'http') {
Linking.openURL(e.data).catch(err => console.error('An error occured', err));
} else {
this.setState({
result: e,
scan: false,
ScanResult: true
})
}
}
activeQR = () => {
this.setState({ scan: true })
}
scanAgain = () => {
this.setState({ scan: true, ScanResult: false })
}
render() {
const { scan, ScanResult, result } = this.state
return (
<View style={styles.scrollViewStyle}>
<Fragment>
<View style={styles.header}>
<TouchableOpacity onPress={()=> BackHandler.exitApp()}>
<Image source={require('./assets/back.png')} style={{height: 36, width: 36}}></Image>
</TouchableOpacity>
<Text style={styles.textTitle}>Scan QR Code</Text>
</View>
{!scan && !ScanResult &&
<View style={styles.cardView} >
<Image source={require('./assets/camera.png')} style={{height: 36, width: 36}}></Image>
<Text numberOfLines={8} style={styles.descText}>Please move your camera {"\n"} over the QR Code</Text>
<Image source={require('./assets/qr-code.png')} style={{margin: 20}}></Image>
<TouchableOpacity onPress={this.activeQR} style={styles.buttonScan}>
<View style={styles.buttonWrapper}>
<Image source={require('./assets/camera.png')} style={{height: 36, width: 36}}></Image>
<Text style={{...styles.buttonTextStyle, color: '#2196f3'}}>Scan QR Code</Text>
</View>
</TouchableOpacity>
</View>
}
{ScanResult &&
<Fragment>
<Text style={styles.textTitle1}>Result</Text>
<View style={ScanResult ? styles.scanCardView : styles.cardView}>
<Text>Type : {result.type}</Text>
<Text>Result : {result.data}</Text>
<Text numberOfLines={1}>RawData: {result.rawData}</Text>
<TouchableOpacity onPress={this.scanAgain} style={styles.buttonScan}>
<View style={styles.buttonWrapper}>
<Image source={require('./assets/camera.png')} style={{height: 36, width: 36}}></Image>
<Text style={{...styles.buttonTextStyle, color: '#2196f3'}}>Click to scan again</Text>
</View>
</TouchableOpacity>
</View>
</Fragment>
}
{scan &&
<QRCodeScanner
reactivate={true}
showMarker={true}
ref={(node) => { this.scanner = node }}
onRead={this.onSuccess}
topContent={
<Text style={styles.centerText}>
Please move your camera {"\n"} over the QR Code
</Text>
}
bottomContent={
<View>
<ImageBackground source={require('./assets/bottom-panel.png')} style={styles.bottomContent}>
<TouchableOpacity style={styles.buttonScan2}
onPress={() => this.scanner.reactivate()}
onLongPress={() => this.setState({ scan: false })}>
<Image source={require('./assets/camera2.png')}></Image>
</TouchableOpacity>
</ImageBackground>
</View>
}
/>
}
</Fragment>
</View>
);
}
}
export default Scan;
scanStyle.js
import React, { Component } from 'react'
import { Dimensions } from 'react-native';
const deviceWidth = Dimensions.get('screen').width;
const deviceHeight = Dimensions.get('screen').height;
const styles = {
scrollViewStyle: {
flex: 1,
justifyContent: 'flex-start',
backgroundColor: '#2196f3'
},
header: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: '10%',
paddingLeft: 15,
paddingTop: 10,
width: deviceWidth,
},
textTitle: {
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
padding: 16,
color: 'white'
},
textTitle1: {
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
padding: 16,
color: 'white'
},
cardView: {
width: deviceWidth - 32,
height: deviceHeight - 350,
alignSelf: 'center',
justifyContent: 'flex-start',
alignItems: 'center',
borderRadius: 10,
padding: 25,
marginLeft: 5,
marginRight: 5,
marginTop: '10%',
backgroundColor: 'white'
},
scanCardView: {
width: deviceWidth - 32,
height: deviceHeight / 2,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
padding: 25,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
backgroundColor: 'white'
},
buttonWrapper: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
buttonScan: {
borderWidth: 2,
borderRadius: 10,
borderColor: '#258ce3',
paddingTop: 5,
paddingRight: 25,
paddingBottom: 5,
paddingLeft: 25,
marginTop: 20
},
buttonScan2: {
marginLeft: deviceWidth / 2 - 50,
width: 100,
height: 100,
},
descText: {
padding: 16,
textAlign: 'center',
fontSize: 16
},
highlight: {
fontWeight: '700',
},
centerText: {
flex: 1,
textAlign: 'center',
fontSize: 18,
padding: 32,
color: 'white',
},
textBold: {
fontWeight: '500',
color: '#000',
},
bottomContent: {
width: deviceWidth,
height: 120,
},
buttonTouchable: {
fontSize: 21,
backgroundColor: 'white',
marginTop: 32,
width: deviceWidth - 62,
justifyContent: 'center',
alignItems: 'center',
height: 44
},
buttonTextStyle: {
color: 'black',
fontWeight: 'bold',
}
}
export default styles;
Svažte komponentu skenování v souboru App.js.
import React from 'react';
import Scan from './src/scan';
const App = () => {
return (
<Scan />
);
};
export default App;
Krok 5:Spusťte svůj projekt
Nyní můžete spustit svůj projekt provedením následujícího příkazu,
react-native run-android
Tady to máš! Vaše vlastní aplikace pro skenování QR kódů v React native :)
Chcete-li experimentovat s různými funkcemi skenování QRCode, vyzkoušejte ve své aplikaci následující metody.
Děkujeme, že jste si přečetli tento článek.
Pokud se vám tento článek líbil, klikněte prosím na srdíčko ♥ a sdílejte, ať ho ostatní najdou!
Celý kód projektu v článku je k dispozici na
GitHub – codemaker2015/qr-code-scanner-react-native
Článek je dostupný také na Medium
Pokud máte zájem o další zkoumání, zde jsou některé zdroje, které mi na cestě pomohly:
-
Nastavení vývojového prostředí · React Native
-
Publikování v Obchodě Google Play · React Native