-
-
Save goodpic/f1ba553d85f96c76b6b2992faf037d87 to your computer and use it in GitHub Desktop.
| import React, { Component } from 'react'; | |
| import { Button, Text, View } from 'react-native'; | |
| import { RNCamera } from 'react-native-camera'; | |
| class ProductScanRNCamera extends Component { | |
| constructor(props) { | |
| super(props); | |
| this.camera = null; | |
| this.barcodeCodes = []; | |
| this.state = { | |
| camera: { | |
| type: RNCamera.Constants.Type.back, | |
| flashMode: RNCamera.Constants.FlashMode.auto, | |
| } | |
| }; | |
| } | |
| onBarCodeRead(scanResult) { | |
| console.warn(scanResult.type); | |
| console.warn(scanResult.data); | |
| if (scanResult.data != null) { | |
| if (!this.barcodeCodes.includes(scanResult.data)) { | |
| this.barcodeCodes.push(scanResult.data); | |
| console.warn('onBarCodeRead call'); | |
| } | |
| } | |
| return; | |
| } | |
| async takePicture() { | |
| if (this.camera) { | |
| const options = { quality: 0.5, base64: true }; | |
| const data = await this.camera.takePictureAsync(options); | |
| console.log(data.uri); | |
| } | |
| } | |
| pendingView() { | |
| return ( | |
| <View | |
| style={{ | |
| flex: 1, | |
| backgroundColor: 'lightgreen', | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| }} | |
| > | |
| <Text>Waiting</Text> | |
| </View> | |
| ); | |
| } | |
| render() { | |
| return ( | |
| <View style={styles.container}> | |
| <RNCamera | |
| ref={ref => { | |
| this.camera = ref; | |
| }} | |
| defaultTouchToFocus | |
| flashMode={this.state.camera.flashMode} | |
| mirrorImage={false} | |
| onBarCodeRead={this.onBarCodeRead.bind(this)} | |
| onFocusChanged={() => {}} | |
| onZoomChanged={() => {}} | |
| permissionDialogTitle={'Permission to use camera'} | |
| permissionDialogMessage={'We need your permission to use your camera phone'} | |
| style={styles.preview} | |
| type={this.state.camera.type} | |
| /> | |
| <View style={[styles.overlay, styles.topOverlay]}> | |
| <Text style={styles.scanScreenMessage}>Please scan the barcode.</Text> | |
| </View> | |
| <View style={[styles.overlay, styles.bottomOverlay]}> | |
| <Button | |
| onPress={() => { console.log('scan clicked'); }} | |
| style={styles.enterBarcodeManualButton} | |
| title="Enter Barcode" | |
| /> | |
| </View> | |
| </View> | |
| ); | |
| } | |
| } | |
| const styles = { | |
| container: { | |
| flex: 1 | |
| }, | |
| preview: { | |
| flex: 1, | |
| justifyContent: 'flex-end', | |
| alignItems: 'center' | |
| }, | |
| overlay: { | |
| position: 'absolute', | |
| padding: 16, | |
| right: 0, | |
| left: 0, | |
| alignItems: 'center' | |
| }, | |
| topOverlay: { | |
| top: 0, | |
| flex: 1, | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| alignItems: 'center' | |
| }, | |
| bottomOverlay: { | |
| bottom: 0, | |
| backgroundColor: 'rgba(0,0,0,0.4)', | |
| flexDirection: 'row', | |
| justifyContent: 'center', | |
| alignItems: 'center' | |
| }, | |
| enterBarcodeManualButton: { | |
| padding: 15, | |
| backgroundColor: 'white', | |
| borderRadius: 40 | |
| }, | |
| scanScreenMessage: { | |
| fontSize: 14, | |
| color: 'white', | |
| textAlign: 'center', | |
| alignItems: 'center', | |
| justifyContent: 'center' | |
| } | |
| }; | |
| export default ProductScanRNCamera; |
Thank you very much, this one works perfectly
tnx, it work for me
That's a good example, however. If somebody can translate it to functional component it will be very nice
can you please let me know that how i can give it specific bar code type to scan?
Works simply and perfectly... Thanks
Thanks
can you please let me know that how i can give it specific bar code type to scan?
I used this same code but getting black screen issue
please help me
@prashhh0231 black screen is normal for the simulator. Use device
Hi, apparently the RNCamera package no longer maintained and has this error "Unable to resolve "deprecated-react-native-prop-types" from "node_modules/react-native/index.js" I tried to solved it (thanks StackOverFlow and GitHub) but unfortunately it didn't work. :(
I saw that it return on this new package
Thank u so much!
very nice