二维码扫描框

ScannerView.tsx

import {Component, default as React} from "react";
import {Animated, Easing, StyleSheet, Text, View} from "react-native";

interface ScannerViewState {
    animation: Animated.Value
}

export class ScannerView extends Component<any, ScannerViewState> {
    animate: Animated.CompositeAnimation;

    constructor(props: any) {
        super(props);
        this.state = {
            animation: new Animated.Value(0)
        };
        this.animate = Animated.timing(this.state.animation, {
            toValue: 2,
            duration: 2000,
            easing: Easing.linear
        });
    }

    componentDidMount() {
        this.startAnimate();
    }

    private startAnimate() {
        this.animate.start(() => {
            this.state.animation.setValue(0);
            this.startAnimate();
        });
    }

    render() {
        return (<View style={styles.container}>
            <View style={styles.scanBox}>
                <Animated.View style={[styles.animate, {
                    transform: [{
                        translateY: this.state.animation.interpolate({
                            inputRange: [0, 1, 2],
                            outputRange: [250, 0, 250]
                        })
                    }]
                }
                ]}/>
            </View>
            <Text style={styles.bottomTipText}>请将二维码/条码放入扫描框内</Text>
        </View>);
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    scanBox: {
        borderRadius: 2,
        borderWidth: 2,
        borderColor: '#00ff00',
        width: 250,
        height: 250
    },
    animate: {
        width: 250, height: 4,
        backgroundColor: '#0f0',
    },
    bottomTipText: {
        justifyContent: 'center',
        alignItems: 'center'
    },
});