react-native 扫描二维码

之前是参考这里的

npm install react-native-smart-barcode --save

react-native link

或者

react-native link react-native-smart-barcode

因为做的是iphone的，所以在安卓那边没有进行配置。

两者的区别大概在于 他们没有进行

“react-native link react-native-smart-barcode” 这一步操作。

如果是iphone的话，可以略过中间那些步骤。

type Props = {};
export default class App extends Component<Props>
在我这里报错，就顺便删掉，就解除问题了。

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Alert
} from 'react-native';
import Barcode from 'react-native-smart-barcode'

export default class App extends Component {
  //构造方法
  constructor(props) {
    super(props);
    this.state = {
      viewAppear: false,
    };
  }
  componentDidMount() {
    //启动定时器
    this.timer = setTimeout(
      () => this.setState({viewAppear: true}),
      250
    );
  }
  //组件销毁生命周期
  componentWillUnmount() {
    //清楚定时器
    this.timer && clearTimeout(this.timer);
  }

  _onBarCodeRead = (e) => {
    // console.log(`e.nativeEvent.data.type = ${e.nativeEvent.data.type}, e.nativeEvent.data.code = ${e.nativeEvent.data.code}`)
    this._stopScan();
    Alert.alert("二维码", e.nativeEvent.data.code, [
      {text: '确认', onPress: () => this._startScan()},
    ])
  };

  _startScan = (e) => {
    this._barCode.startScan()
  };

  _stopScan = (e) => {
    this._barCode.stopScan()
  }
  render() {
    return (
      <View style={{flex: 1}}>
        {this.state.viewAppear ?
          <Barcode style={{flex: 1,}} ref={component => this._barCode = component}
                   onBarCodeRead={this._onBarCodeRead}/>
          : null
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

还会出现的问题也就是 关于 func的。

只要把 Barcode 中，把“PropTypes” 单独写出来就可以了。

import PropTypes from 'prop-types'