react-native （二維碼掃描實現）/導入react-native-camera遇到的問題記錄

react-native-camera插件沒有相冊選取的封裝（不知道是不是沒找到，源碼扒光了也沒看見），下一篇使用另一插件重新實現此功能

按照官方正常的導入流程

npm install react-native-camera --save
react-native link react-native-camera

發現在編譯的時候會碰到各種各樣的問題，依次解決但最後還是放棄了（盡力了，問題太多了！！！），

最後試着找不同的導入方式

npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save
react-native link react-native-camera
（就這個問題相對較少）

下面是導入的時遇到的問題記錄：
1.style內的引用報錯。。
解決方法：將本地app/build.gradle 文件下做如下修改，buildToolsVersion 小編直接刪掉了

compileSdkVersion 25
buildToolsVersion  '25.0.2'

2.依賴報錯

編譯總會因爲這兩個依賴而報各種各樣的錯誤，不知道是不是因爲版本的問題，同事的這個版本並沒有什麼問題，（根據個人情況吧），最後做了如下修改

implementation "com.android.support:appcompat-v7:25.2.0"
implementation 'com.google.android.gms:play-services-vision:11.6.0'

導了一天的插件，就修改這兩個地方成功了！！

遇到問題還是得自己多想想吶，大部分時間都在網上找bug解決方式了，真的是能用、適用的少之又少，一言難盡

下面實現 掃描二維碼功能

效果圖：當前使用的虛擬機，沒有掃描視圖（真機親測可用）

代碼塊：

/**
 * 創建： jiaojiao on 2018/10/23.
 * 功能：掃描二維碼
 */
'use strict';
import React, {PureComponent} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Platform,
    Dimensions,
    Animated,
    InteractionManager,
    Easing,
    Alert,
    Image,
    ImageBackground
} from 'react-native';
import Header from '../../components/header'; //頭部導航
import Camera from 'react-native-camera';
let {width, height} = Dimensions.get('window');

export default class MaxCardScreen extends PureComponent {
    static propTypes = {};

    constructor(props) {
        super(props);
        this.state = {
            show: true,
            anim: new Animated.Value(0),
            camera: {
                aspect: Camera.constants.Aspect.fill,
            },
        };
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.startAnimation()
        });
    }

    startAnimation() {
        if (this.state.show) {
            this.state.anim.setValue(0)
            Animated.timing(this.state.anim, {
                toValue: 1,
                duration: 1500,
                easing: Easing.linear,
            }).start(() => this.startAnimation());
        }
    }

    componentWillUnmount() {
        this.state.show = false;
    }

    //掃描二維碼方法
    barcodeReceived = (e) => {
        if (this.state.show) {
            this.state.show = false;
            if (e) {
                this.props.navigator.pop()
                // this.props.ReceiveCode(e.data)
                console.log('jiaojiao---' + e.data)
            } else {
                Alert.alert(
                    '提示',
                    '掃描失敗'
                        [{text: '確定'}]
                )
            }
        }
    }
    render() {
        return (
            <View style={[global.styles.screen]}>
                <Header title={"掃描二維碼"} doneText={"相冊"} style={[styles.header]} onPress="photoShow"/>
                <View style={styles.container}>
                    <Camera
                        ref={(cam) => { this.camera = cam; }}
                        style={styles.preview}
                        aspect={this.state.camera.aspect}
                        onBarCodeRead={this.barcodeReceived.bind(this)}
                        barCodeTypes={['qr']}
                    >
                        <View
                            style={{height: Platform.OS == 'ios' ? (height-264)/3:(height-244)/3,width:width,backgroundColor:'rgba(0,0,0,0.5)',}}>
                        </View>
                        <View style={{flexDirection:'row'}}>
                            <View style={styles.itemStyle}/>
                            <ImageBackground style={styles.rectangle}
                                   source={''}>
                                <Animated.View
                                    style={[styles.animatiedStyle, { transform: [{translateY: this.state.anim.interpolate({inputRange: [0,1], outputRange: [0,200]})}]}]}>
                                </Animated.View>
                            </ImageBackground>
                            <View style={styles.itemStyle}/>
                        </View>
                        <View style={{flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)',width:width,alignItems:'center'}}>
                            <Text style={styles.textStyle}>將二維碼放入框內,即可自動掃描</Text>
                        </View>
                    </Camera>
                </View>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: '#efefef'
    },
    itemStyle: {
        backgroundColor: 'rgba(0,0,0,0.5)',
        width: (width - 200) / 2,
        height: 200
    },
    textStyle: {
        color: '#666',
        marginTop: 20,
        fontSize: 16
    },
    navTitleStyle: {
        color: 'white',
        fontWeight: 'bold',
    },
    navBarStyle: { // 導航條樣式
        height: Platform.OS == 'ios' ? 64 : 44,
        backgroundColor: 'rgba(34,110,184,1.0)',
        // 設置主軸的方向
        flexDirection: 'row',
        // 垂直居中 ---> 設置側軸的對齊方式
        alignItems: 'center',
        justifyContent: 'center'
    },

    leftViewStyle: {
        // 絕對定位
        // 設置主軸的方向
        flexDirection: 'row',
        position: 'absolute',
        left: 10,
        bottom: Platform.OS == 'ios' ? 15 : 12,
        alignItems: 'center',
        width: 30
    },
    animatiedStyle: {
        height: 2,
        backgroundColor: '#00FF00'
    },

    preview: {
        flex: 1,
    },
    rectangle: {
        height: 200,
        width: 200,
    }
});