androidScan.js 1.78 KB
/**
 * Created by xiniu on 2018/5/11.
 */
import React, { Component } from 'react';
import { StyleSheet,
    View,
    Text,
    InteractionManager,
    TouchableOpacity,
    Image,
    Keyboard,
} from 'react-native';
import BarcodeScanner from 'react-native-barcodescanner';
import { width, height, zoomW, zoomH } from '../../utils/getSize';

export default class AndroidScan extends Component {
  static navigationOptions = ({ navigation, screenProps }) => ({
    title: '扫描',
    headerLeft: (
      <TouchableOpacity style={styles.backWrap} onPress={() => navigation.goBack()}>
        <Image source={require('../../img/back_gray.png')} resizeMode="contain" />
      </TouchableOpacity>
    ),
    headerRight: (
      <View />
      ),
  });
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  componentWillMount() {
    Keyboard.dismiss();
    InteractionManager.runAfterInteractions(() => {
      this.setState({
        show: true,
      });
    });
  }

  barcodeReceived(e) {
    this.props.navigation.state.params.callBack(e.data);
    this.props.navigation.goBack();
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#efeff4', height: '100%' }}>
        {this.state.show && <BarcodeScanner style={{ flex: 1, backgroundColor: 'rgba(0,0,0,.1)' }} onBarCodeRead={this.barcodeReceived.bind(this)} cameraType="back" torchMode="off" />}
        {!this.state.show && <View style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Text>加载中......</Text>
        </View>}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backWrap: {
    justifyContent: 'center',
    paddingLeft: 18.5 / zoomW,
    paddingRight: 18.5 / zoomW,
    height: 44 / zoomH,
  },
});