Question

我正在使用react-native v0.49，当我运行qrcode扫描程序时出错。

 cannot read property oneOftype undefined

扫描页面组件

    import React, { Component } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Linking,
    StyleSheet,
} from 'react-native';
// styles
import { style } from './style';
import { globalStyle } from '../../../assets/styles/globalStyle';

// redux
import { connect } from 'react-redux';
import * as actions from '../../../actions';


//third party library
import QRCodeScanner from 'react-native-qrcode-scanner';


class ScanPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            barcodeText: ''
        }

    }
    onSuccess(e) {
        this.setState({ barcodeText: e.data });
        console.log(e);
    }

    render() {
        const { } = style;


        return (
            <QRCodeScanner
                onRead={this.onSuccess.bind(this)}
                topContent={(
                    <Text style={styles.centerText}>
                        Go to <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on your computer and scan the QR code.
          </Text>
                )}
                bottomContent={(
                    <TouchableOpacity style={styles.buttonTouchable}>
                        <Text style={styles.buttonText}>OK. Got it!</Text>
                    </TouchableOpacity>
                )}
            />
        );
    }
}

const mapStateToProps = () => {

}
const styles = StyleSheet.create({
    centerText: {
      flex: 1,
      fontSize: 18,
      padding: 32,
      color: '#777',
    },

    textBold: {
      fontWeight: '500',
      color: '#000',
    },

    buttonText: {
      fontSize: 21,
      color: 'rgb(0,122,255)',
    },

    buttonTouchable: {
      padding: 16,
    },
  });

export default connect(null, actions)(ScanPage);

我检查了node_modules中的react-native-qcode-scanner文件夹到示例中，我做了exaclty这个例子。另外在插件的这个文件夹的index.js中，我看到了oneOfType属性，但是我没有看到任何错误。这是node_modules-＆gt;的index.js;反应天然-QRCode的扫描器

 'use strict';

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';

    import {
      StyleSheet,
      Dimensions,
      Vibration,
      Animated,
      Easing,
      View,
      Text,
      Platform,
    } from 'react-native';

    import Camera from 'react-native-camera'


    export default class QRCodeScanner extends Component {
      static propTypes = {
        onRead: PropTypes.func.isRequired,
        reactivate: PropTypes.bool,
        reactivateTimeout: PropTypes.number,
        fadeIn: PropTypes.bool,
        showMarker: PropTypes.bool,
        customMarker: PropTypes.element,
        containerStyle: PropTypes.any,
        cameraStyle: PropTypes.any,
        topViewStyle: PropTypes.any,
        bottomViewStyle: PropTypes.any,
        topContent: PropTypes.oneOfType([
          PropTypes.element,
          PropTypes.string,
        ]),
        bottomContent: PropTypes.oneOfType([
          PropTypes.element,
          PropTypes.string,
        ]),
        notAuthorizedView: PropTypes.element,
      }

      static defaultProps = {
        onRead: () => (console.log('QR code scanned!')),
        reactivate: false,
        reactivateTimeout: 0,
        fadeIn: true,
        showMarker: false,
        notAuthorizedView: (
          <View style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
            <Text style={{
              textAlign: 'center',
              fontSize: 16,
            }}>
              Camera not authorized
            </Text>
          </View>
        ),
      }

      constructor(props) {
        super(props);
        this.state = {
          scanning: false,
          fadeInOpacity: new Animated.Value(0),
          isAuthorized: false,
        }

        this._handleBarCodeRead = this._handleBarCodeRead.bind(this);
      }

      componentWillMount() {
        if (Platform.OS === 'ios') {
          Camera.checkVideoAuthorizationStatus().then(isAuthorized => {
            this.setState({ isAuthorized })
          })
        }
        else {
          this.setState({ isAuthorized: true })
        }
      }


      componentDidMount() {
        if (this.props.fadeIn) {
          Animated.sequence([
            Animated.delay(1000),
            Animated.timing(
              this.state.fadeInOpacity,
              {
                toValue: 1,
                easing: Easing.inOut(Easing.quad),
              },
            )
          ]).start();
        }
      }

      _setScanning(value) {
        this.setState({ scanning: value });
      }

      _handleBarCodeRead(e) {
        if (!this.state.scanning) {
          Vibration.vibrate();
          this._setScanning(true);
          this.props.onRead(e)
          if (this.props.reactivate) {
            setTimeout(() => (this._setScanning(false)), this.props.reactivateTimeout);
          }
        }
      }

      _renderTopContent() {
        if (this.props.topContent) {
          return this.props.topContent;
        }
        return null;
      }

      _renderBottomContent() {
        if (this.props.bottomContent) {
          return this.props.bottomContent;
        }
        return null;
      }

      _renderCameraMarker() {
        if (this.props.showMarker) {
          if (this.props.customMarker) {
            return this.props.customMarker;
          } else {
            return (
              <View style={styles.rectangleContainer}>
                <View style={styles.rectangle} />
              </View>
            );
          }
        }
        return null;
      }

      _renderCamera() {
        const { notAuthorizedView } = this.props
        const { isAuthorized } = this.state
        if (isAuthorized) {
          if (this.props.fadeIn) {
            return (
              <Animated.View
                style={{
                  opacity: this.state.fadeInOpacity,
                  backgroundColor: 'transparent'
                }}>
                <Camera style={[styles.camera, this.props.cameraStyle]} onBarCodeRead={this._handleBarCodeRead.bind(this)}>
                  {this._renderCameraMarker()}
                </Camera>
              </Animated.View>
            )
          }
          return (
            <Camera style={[styles.camera, this.props.cameraStyle]} onBarCodeRead={this._handleBarCodeRead.bind(this)}>
              {this._renderCameraMarker()}
            </Camera>
          )
        } else {
          return notAuthorizedView
        }
      }

      reactivate() {
        this._setScanning(false);
      }

      render() {
        return (
          <View style={[styles.mainContainer, this.props.containerStyle]}>
            <View style={[styles.infoView, this.props.topViewStyle]}>
              {this._renderTopContent()}
            </View>
            {this._renderCamera()}
            <View style={[styles.infoView, this.props.bottomViewStyle]}>
              {this._renderBottomContent()}
            </View>
          </View>
        )
      }
    }

    const styles = StyleSheet.create({
      mainContainer: {
        flex: 1
      },
      infoView: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center',
        width: Dimensions.get('window').width,
      },

      camera: {
        flex: 0,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent',
        height: Dimensions.get('window').width,
        width: Dimensions.get('window').width,
      },

      rectangleContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent',
      },

      rectangle: {
        height: 250,
        width: 250,
        borderWidth: 2,
        borderColor: '#00FF00',
        backgroundColor: 'transparent',
      },
    })

Answer 1

尽管这是一个很晚的答案，但我认为可以这样做，以防可能对某人有所帮助。看起来您的RN相机使用的是旧的proptype表示法，

import React, { Component, PropTypes } from 'react';

但是一定是

import React, { Component } from 'react';
import PropTypes from 'prop-types';

使用重新安装rn相机

npm install react-native-camera@latest --save
react-native link react-native-camera

react-native-qrcode-scanner无法读取属性oneOftype undefined

1 个答案: