123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- import React, {Component} from 'react';
- import {
- StyleSheet,
- Animated,
- default as Easing,
- ImageBackground,
- Text,
- View,
- } from 'react-native';
- import {RNCamera} from 'react-native-camera';
- export default class sweep_code_invoice extends Component {
- constructor(props) {
- super(props);
- this.props.navigation.dangerouslyGetParent().setOptions({
- tabBarVisible: false,
- });
- this.state = {
- //中间横线动画初始值
- moveAnim: new Animated.Value(-2),
- };
- }
- componentDidMount() {
- this.startAnimation();
- }
- /** 扫描框动画*/
- startAnimation = () => {
- this.state.moveAnim.setValue(-2);
- Animated.sequence([
- Animated.timing(this.state.moveAnim, {
- toValue: 200,
- duration: 1500,
- easing: Easing.linear,
- }),
- Animated.timing(this.state.moveAnim, {
- toValue: -1,
- duration: 1500,
- easing: Easing.linear,
- }),
- ]).start(() => this.startAnimation());
- };
- onBarCodeRead = result => {
- const {navigate} = this.props.navigation;
- const {data} = result; //只要拿到data就可以了
- //扫码后的操作
- console.log(data);
- };
- render() {
- return (
- <View style={styles.container}>
- <RNCamera
- ref={ref => {
- this.camera = ref;
- }}
- autoFocus={RNCamera.Constants.AutoFocus.on} /*自动对焦*/
- style={[styles.preview]}
- type={RNCamera.Constants.Type.back} /*切换前后摄像头 front前back后*/
- flashMode={RNCamera.Constants.FlashMode.off} /*相机闪光模式*/
- onBarCodeRead={this.onBarCodeRead}>
- <View
- style={{
- width: 500,
- height: 220,
- backgroundColor: 'rgba(0,0,0,0.5)',
- }}
- />
- <View style={[{flexDirection: 'row'}]}>
- <View
- style={{
- backgroundColor: 'rgba(0,0,0,0.5)',
- height: 200,
- width: 200,
- }}
- />
- <ImageBackground
- style={{width: 200, height: 200}}
- source={require('../../source/img/sweep_code/icon_scan_rect.png')}>
- <Animated.View
- style={[
- styles.border,
- {transform: [{translateY: this.state.moveAnim}]},
- ]}
- />
- </ImageBackground>
- <View
- style={{
- backgroundColor: 'rgba(0,0,0,0.5)',
- height: 200,
- width: 200,
- }}
- />
- </View>
- <View
- style={{
- flex: 1,
- backgroundColor: 'rgba(0, 0, 0, 0.5)',
- width: 500,
- alignItems: 'center',
- }}>
- <Text style={styles.rectangleText}>
- 将二维码放入框内,即可自动扫描
- </Text>
- </View>
- </RNCamera>
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- flexDirection: 'row',
- },
- preview: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- rectangleContainer: {
- flex: 1,
- justifyContent: 'flex-end',
- alignItems: 'center',
- },
- rectangle: {
- height: 200,
- width: 200,
- borderWidth: 1,
- borderColor: '#fcb602',
- backgroundColor: 'transparent',
- borderRadius: 10,
- },
- rectangleText: {
- flex: 0,
- color: '#fff',
- marginTop: 10,
- },
- border: {
- flex: 0,
- width: 196,
- height: 2,
- backgroundColor: '#76EE00',
- borderRadius: 50,
- },
- });
|