扫码动画用原生模块实现，review by 孙凯

@@ -16,40 +16,20 @@ import ReactNative, {
 } from 'react-native';
 
 import Camera from 'yh_rncamera';
+import ScanBar from './ScanBar'
 const yh_QRCodeHelperEvt = new NativeEventEmitter(ReactNative.NativeModules.YH_QRCodeHelper)
 
 let camera;
 let scanTypeValue, animationFromTopToBottom;
-let animationStartHeight = Dimensions.get('window').height * 0.10;
-let animationEndHeight = Dimensions.get('window').height * 0.44;
-let kScreenPointScale = Dimensions.get('window').width/320.0;
-let kScreenPoint6Scale = Dimensions.get('window').width/375.0;
-let KScanRectOfInterestWidth = (175+220)*kScreenPointScale/Dimensions.get('window').height;
-let KScanRectOfInterestHeight = (190+220)*kScreenPointScale/ Dimensions.get('window').width;
+let animationStartHeight = height * 0.10;
+let animationEndHeight = height * 0.44;
+let kScreenPointScale = width/320.0;
+let kScreenPoint6Scale = width/375.0;
+let KScanRectOfInterestWidth = (175+220)*kScreenPointScale/height;
+let KScanRectOfInterestHeight = (190+220)*kScreenPointScale/ width;
 
 export default class QRCode extends React.Component {
 
-    startAnimation() {
-        Animated.timing(this.state.destX, {
-            toValue: animationFromTopToBottom ? animationEndHeight : animationStartHeight,
-            duration: 1480,
-        }).start(() => {
-            animationFromTopToBottom = !animationFromTopToBottom;
-        });
-    };
-
-    componentDidMount() {
-
-        this.timer = setInterval(() => {
-            this.startAnimation();
-        }, 1500);
-
-    }
-
-    componentWillUnmount() {
-        this.timer && clearInterval(this.timer);
-    }
-
     constructor(props) {
         super(props);
         camera = null;
@@ -90,20 +70,14 @@ export default class QRCode extends React.Component {
                     style={styles.camera}
                     captureAudio={false}
                 >
-                <Image style={styles.sacnRange} source={require('../../images/cameraQR5.png')}>
-
+                    <ScanBar
+                        style={styles.sacnRange}
+                    />
                     <Image style={styles.tipInfoImage} source={require('../../images/qr_bt.png')}>
                         <Text style={styles.tipInfo}>
                             尽量让二维码充满框内
                         </Text>
                     </Image>
-
-
-                    <Animated.Image style={[styles.sacnLine,{
-                        top: this.state.destX
-                    }]} source={require('../../images/cameraQRLine.png')} />
-
-                </Image>
                 </Camera>
 
 
@@ -137,32 +111,29 @@ export default class QRCode extends React.Component {
 }
 
 
+let {width, height} = Dimensions.get('window');
 
 let styles = StyleSheet.create({
     container: {
         flex: 1
     },
     sacnRange: {
+        position: 'absolute',
         backgroundColor: 'rgba(255, 255, 255, 0.00)',
-        height: Dimensions.get('window').height - 44,
-        width: Dimensions.get('window').width,
-    },
-    sacnLine: {
-        backgroundColor: 'rgba(255, 255, 255, 0.00)',
-        height: 2,
-        width: 210,
-        left: (Dimensions.get('window').width - 210) / 2,
-        top: animationStartHeight,
+        height: height - 44,
+        width: width,
+        top: 0,
     },
     camera: {
-        height: Dimensions.get('window').height - 44,
+        height: height - 44,
         alignItems: 'center',
     },
     tipInfoImage: {
-        top: Dimensions.get('window').height * 0.6,
-        left: (Dimensions.get('window').width - 170) / 2,
+        top: height * 0.6,
         width: 170,
         height: 20,
+        borderRadius: 10,
+        justifyContent: 'center',
     },
     tipInfo: {
         flex: 1,

+var { requireNativeComponent } = require('react-native');
+
+module.exports = requireNativeComponent('YH_ScanBarView', null);