iosScan.js 2.6 KB
/**
 * Created by xiniu on 2018/5/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    Dimensions,
    StyleSheet,
    Text,
    ActivityIndicator,
    TouchableHighlight,
    View,
    Modal,
    TouchableOpacity,
    Image,
    Alert,
    Keyboard,
} from 'react-native';
import Camera from 'react-native-camera';
import { width, height, zoomW, zoomH } from '../../utils/getSize';

const zoom = 750 / parseInt(Dimensions.get('window').width);

export default class IOSScan 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 = {

    };
  }

  componentWillMount() {
      Keyboard.dismiss();
  }

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

  render() {
    return (
      <View style={styles.container}>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          captureQuality={Camera.constants.CaptureQuality['720p']}
          captureTarget={Camera.constants.CaptureTarget.memory}
          onBarCodeRead={this.onBarCodeRead.bind(this)}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}
        >
          <View>
            <View style={{ flexDirection: 'row', marginBottom: 291.5 / zoom }}>
              <View style={{ width: 30, height: 30, borderTopWidth: 2, borderColor: '#fff', borderLeftWidth: 2, marginRight: 291.5 / zoom }} />
              <View style={{ width: 30, height: 30, borderTopWidth: 2, borderColor: '#fff', borderRightWidth: 2 }} />
            </View>
            <View style={{ flexDirection: 'row' }}>
              <View style={{ width: 30, height: 30, borderBottomWidth: 2, borderColor: '#fff', borderLeftWidth: 2, marginRight: 291.5 / zoom }} />
              <View style={{ width: 30, height: 30, borderBottomWidth: 2, borderColor: '#fff', borderRightWidth: 2 }} />
            </View>
          </View>
        </Camera>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backWrap: {
    justifyContent: 'center',
    paddingLeft: 18.5 / zoomW,
    paddingRight: 18.5 / zoomW,
    height: 44 / zoomH,
  },
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  preview: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});