react-native-camera的QRCode扫描仪问题

Question

我使用ReactNative开发我的iOS应用程序，为了实现QRCode扫描仪功能，我使用了react-native-camera组件，它为我的project.everything提供条形码扫描功能，但当我成功识别QRCode时，下次使用该模型时，屏幕就冻结了，似乎应用程序崩溃了。有趣的是，当屏幕冻结时，一旦模型从导航的左键取消，模块就可以正常工作。我不确定这是NavigatorIOS的内部错误，还是仅仅是react-native-camera本身的错误。

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

Answer 2

您可以尝试使用Library react原生qrcode https://github.com/moaazsidat/react-native-qrcode-scanner。我请客，

它的运行。你可以试试。在ios和android中。