Проблема с QRCode-сканером с реакцией на родной камере

Question

Я использую ReactNative для разработки моего iOS-приложения, чтобы реализовать функцию сканера QRCode, я взял компонент реагирующей на себя камеры, который обеспечивает функцию сканера штрих-кода для моего проекта. Все идет все но, когда мне удалось распознать QRCode, в следующий раз, когда я использую модель, экран просто застыл, похоже, что приложение разбилось. что-то интересное, так как экран застыл, и как только модель отменилась от левой кнопки навигации, модуль может работать исправно. Я не уверен, является ли это внутренней ошибкой NavigatorIOS или просто ошибкой самой реакционной камеры.

здесь код компонента QRCode:

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

И в другом компоненте я нажимаю эту QRcode к новому чувством:

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

Любой ответ будет полезно!

Answer 1

Я думаю, что это внутренняя ошибка NavigatorIOS, или, может быть, просто еще что-то не так.

Blew - это мой код, это нормально.

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