增加【扫描条形码】相关组件、图标

app/Router.js

@@ -18,6 +18,7 @@ import FillUnitPricePage from './containers/equipConsu/module/FillUnitPricePage'
 import QuickOrderPage from './containers/quickOrder/QuickOrderPage';
 import TransOrderPage from './containers/transOrder/TransOrderPage';
 import TransSearchPage from './containers/transOrder/module/TransSearchPage';
+import BarCodePage from './containers/transOrder/module/BarCodePage';
 import HistoricalOrderPage from './containers/historicalOrder/HistoricalOrderPage';
 import LineOrderPage from './containers/historicalOrder/module/LineOrderPage';
 import SubSuccPage from './containers/common/SubSuccPage';
@@ -35,6 +36,7 @@ const Router = createAppContainer(createStackNavigator({
   QuickOrderPage: {screen: QuickOrderPage},
   TransOrderPage: {screen: TransOrderPage},
   TransSearchPage: {screen: TransSearchPage},
+  BarCodePage: {screen: BarCodePage},
   HistoricalOrderPage: {screen: HistoricalOrderPage},
   LineOrderPage: {screen: LineOrderPage},
   SubSuccPage: {screen: SubSuccPage}

app/containers/transOrder/module/BarCodePage.js

+import React, { Component } from 'react';
+import {
+    View,
+    StyleSheet,
+    Text,
+    Animated,
+    Easing,
+    InteractionManager,
+    TouchableOpacity,
+    Image,
+    SafeAreaView
+} from 'react-native';
+import {
+    title_text_color,
+    pxSize,
+    Height,
+    Width,
+    icon_style,
+    safe_view,
+    promary_color
+} from '../../../base/BaseStyle';
+import { show } from '../../../utils/Utils';
+import { RNCamera } from 'react-native-camera';
+import StatusBarView from '../../common/StatusBarView';
+
+class BarCodePage extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { 
+            transCode:'', // 条码
+            typeCode: '', // 条码类型
+            showCode: true,
+            // animate: new Animated.Value(0), // 二维坐标{x:0,y:0}
+            animateCode: new Animated.Value((Width() - 200) / 2,(Height() - 340) / 2),
+        }
+    }
+
+    componentDidMount() {
+        InteractionManager.runAfterInteractions(() => {
+            this.startAnimation()
+        })
+        console.log('进入-------', this.state.showCode)
+    }
+
+    // 动画开始
+    startAnimation() {
+        // if(this.state.showCode) {
+            this.state.animateCode.setValue(0)
+            Animated.timing(this.state.animateCode, {
+                toValue: 1,             // 运动终止位置，比值
+                duration: 2500,         // 动画时长
+                easing: Easing.linear,  // 线性的渐变函数
+                delay: 0.3,             // 在一段时间之后开始动画（单位是毫秒），默认为0
+            }).start(() => this.startAnimation())
+        // }
+    }
+
+    componentWillUnmount() {
+        this.state.showCode = false
+        console.log('进入-结束🔚------', this.state.showCode)
+    }
+
+    barcodeReceived(e) {
+        let that = this
+        let { typeName, supPage } = that.props.navigation.state.params
+        if(this.state.showCode){
+            console.log(e);
+            that.setState({
+                transCode: e.data,
+                typeCode: e.type,
+                showCode: false
+            })
+            if(e.data) {
+                let barCodeData = {
+                    typeName: typeName,
+                    typeValue: e.data
+                }
+                that.props.navigation.navigate(supPage.pageName, { barCodeData, title: supPage.title })
+            }
+        }
+    }
+
+    // 关闭扫一扫
+    closeScanPage() {
+        let { supPage } = this.props.navigation.state.params
+        this.props.navigation.navigate(supPage.pageName, { title: supPage.title })
+    }
+
+    render() { 
+        return ( 
+            <View style={styles.container}>
+                <StatusBarView
+                    isReactStackNavigator={true}
+                    backgroundColor={promary_color}
+                    barStyle = 'light-content'
+                    />
+                <SafeAreaView style={safe_view}>
+                    <RNCamera
+                        onBarCodeRead={this.barcodeReceived.bind(this)}
+                        onCameraReady={() => {
+                            console.log('ready')
+                        }}
+                        permissionDialogTitle={'提示信息'}
+                        permissionDialogMessage={'APP需要使用相机，请打开相机权限允许APP使用'}
+                        style={styles.scan_camera}
+                    >
+                        <View style={styles.scan_cont_box}>
+                            <View style={styles.scan_cont_circle}>
+                                <Animated.View style={{
+                                    alignItems: 'center',
+                                    transform: [{
+                                        // translateX: x轴移动
+                                        // translateY: y轴移动
+                                        translateY: this.state.animateCode.interpolate({
+                                            inputRange: [0,1],
+                                            outputRange: [0,200]
+                                        })
+                                    }]
+                                }}>
+                                    <Text style={styles.scan_circle_init}></Text>
+                                </Animated.View>
+                            </View>
+                        </View>
+                        <TouchableOpacity
+                            activeOpacity={.8}
+                            style={styles.scan_top_box}
+                            onPress={() => this.closeScanPage()}
+                            >
+                            <Image source={require('../../../images/close_white_icon2.png')} style={icon_style}/>
+                        </TouchableOpacity>
+                        <View style={styles.scan_info_box}>
+                            <Text style={styles.scan_info}>将条形码放入框内，即可自动扫描</Text>
+                        </View>
+                    </RNCamera>
+                </SafeAreaView>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    scan_top_box: {
+        position: "absolute",
+        left: 20,
+        top: 20,
+        width: pxSize(24),
+        height: pxSize(24)
+    },
+    scan_camera: {
+        flex: 1,
+        height: Height()
+    },
+    scan_cont_box: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.3)',
+    },
+    scan_cont_circle: {
+        width: 260,
+        height: 260,
+        borderWidth: 1,
+        borderColor: '#919191',
+        backgroundColor: 'rgba(255,255,255,0.1)'
+    },
+    scan_circle_init: {
+        width:250,
+        height:1,
+        backgroundColor:'#00ff00'
+    },
+    scan_info_box: {
+        height: 100,
+        backgroundColor: 'rgba(0,0,0,0.3)',
+        alignItems: 'center',
+        width: Width()
+    },
+    scan_info: {
+        color: title_text_color
+    },
+    info: {
+        width: Width(),
+        height: 80,
+        backgroundColor: '#fff',
+        paddingLeft: 10,
+        paddingBottom:5,
+        justifyContent: 'space-around',
+    },
+})
+ 
+export default BarCodePage;
\ No newline at end of file