ios - QRCode scanner issue with react-native-camera -
i use reactnative develop ios app,to realize qrcode scanner function,i took react-native-camera component provide barcode scanner function project.everything goes right,but when had succeed in recognizing qrcode,next time use model,the screen got frozen,seems app goes crashed. interesting screen frozen,and once model cancelled left button of navigation,the module can work properly. i'm not sure whether it's inner bug of navigatorios,or bug of react-native-camera itself.
here qrcode component code:
'use strict'; var react = require('react-native'); var dimensions = require('dimensions'); var { stylesheet, view, text, touchableopacity, vibrationios, navigator, } = react; var camera = require('react-native-camera'); var { width, height } = dimensions.get('window'); var qrcodescreen = react.createclass({ proptypes: { cancelbuttonvisible: react.proptypes.bool, cancelbuttontitle: react.proptypes.string, onsucess: react.proptypes.func, oncancel: react.proptypes.func, }, getdefaultprops: function() { return { cancelbuttonvisible: false, cancelbuttontitle: 'cancel', barcodeflag: true, }; }, _onpresscancel: function() { var $this = this; requestanimationframe(function() { $this.props.navigator.pop(); if ($this.props.oncancel) { $this.props.oncancel(); } }); }, _onbarcoderead: function(result) { var $this = this; if (this.props.barcodeflag) { this.props.barcodeflag = false; settimeout(function() { vibrationios.vibrate(); $this.props.navigator.pop(); $this.props.onsucess(result.data); }, 1000); } }, render: function() { var cancelbutton = null; if (this.props.cancelbuttonvisible) { cancelbutton = <cancelbutton onpress={this._onpresscancel} title={this.props.cancelbuttontitle} />; } return ( <camera onbarcoderead={this._onbarcoderead} style={styles.camera}> <view style={styles.rectanglecontainer}> <view style={styles.rectangle}/> </view> {cancelbutton} </camera> ); }, }); var cancelbutton = react.createclass({ render: function() { return ( <view style={styles.cancelbutton}> <touchableopacity onpress={this.props.onpress}> <text style={styles.cancelbuttontext}>{this.props.title}</text> </touchableopacity> </view> ); }, }); var styles = stylesheet.create({ camera: { width:width, height: height, alignitems: 'center', justifycontent: 'center', }, rectanglecontainer: { flex: 1, alignitems: 'center', justifycontent: 'center', backgroundcolor: 'transparent', }, rectangle: { height: 250, width: 250, borderwidth: 2, bordercolor: '#00ff00', backgroundcolor: 'transparent', }, cancelbutton: { flexdirection: 'row', justifycontent: 'center', backgroundcolor: 'white', borderradius: 3, padding: 15, width: 100, marginbottom: 10, }, cancelbuttontext: { fontsize: 17, fontweight: '500', color: '#0097ce', }, }); module.exports = qrcodescreen; and in component push qrcode new sence:
'use strict'; var react = require('react-native'); var { appregistry, stylesheet, text, view, touchableopacity, navigatorios, alertios, navigator, } = react; var qrcodescreen = require('./qrcodescreen'); var cameraapp = react.createclass({ render: function() { return ( <navigatorios style={styles.container} initialroute={{ title: 'index', backbuttontitle: 'back', component: index, }} /> ); } }); var index = react.createclass({ render: function() { return ( <view style={styles.contentcontainer}> <touchableopacity onpress={this._onpressqrcode}> <text>read qrcode</text> </touchableopacity> </view> ); }, _onpressqrcode: function() { this.props.navigator.push({ component: qrcodescreen, title: 'qrcode', passprops: { onsucess: this._onsucess, }, }); }, // onpresscancel:function(){ // // this.props.navigator.getcontext(this).pop(); // // }, _onsucess: function(result) { alertios.alert('code context', result, [{text: 'cancel', onpress: ()=>console.log(result)}]); // console.log(result); }, }); var styles = stylesheet.create({ container: { flex: 1, backgroundcolor: '#f5fcff', }, contentcontainer: { flex: 1, alignitems: 'center', justifycontent: 'center', } }); appregistry.registercomponent('example', () => cameraapp); any answer helpful!
i think it's inner bug of navigatorios, or maybe sth else wrong.
blew code, ok.
'use strict'; const react = require('react-native'); const { appregistry, stylesheet, text, view, touchableopacity, navigator, } = react; var qrcodescreen = require('./qrcodescreen'); const cameraapp = () => { const renderscene = (router, navigator) => { switch (router.name) { case 'index': return <index navigator={navigator}/>; case 'qrcodescreen': return <qrcodescreen onsucess={router.onsucess} cancelbuttonvisible={router.cancelbuttonvisibl} navigator={navigator} />; } } return ( <navigator style={styles.container} initialroute={{ name: 'index', }} renderscene={renderscene} /> ); }; const index = ({navigator}) => { const onpressqrcode = () => { navigator.push({ name: 'qrcodescreen', title: 'qrcode', onsucess: onsucess, cancelbuttonvisible: true, }); }; const onsucess = (result) => { console.log(result); }; return ( <view style={styles.contentcontainer}> <touchableopacity onpress={onpressqrcode}> <text>read qrcode</text> </touchableopacity> </view> ); }; module.exports = cameraapp; const styles = stylesheet.create({ container: { flex: 1, backgroundcolor: '#f5fcff', }, contentcontainer: { flex: 1, alignitems: 'center', justifycontent: 'center', } }); 
Comments
Post a Comment