React Native之相机扫码

// 配置andriod/app/src/build.gradle 

defaultConfig {
    applicationId "com.jtyapps"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
    // 添加这里
    missingDimensionStrategy 'react-native-camera', 'general'
}

// 配置andriod/gradle/wrapper/gradle-wrapper.properties
// 本教程使用的是这个版本
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

// ViewFinder.js
import React, {
    Component,
} from 'react';
import {
    ActivityIndicator,
    StyleSheet,
    View,
} from 'react-native';
import { scaleSizeW, scaleSizeH, setSpText } from '../../utils/scale';


export default class Viewfinder extends Component {
    constructor(props) {
        super(props);

    }

    getBackgroundColor = () => {
        return ({
            backgroundColor: this.props.backgroundColor,
        });
    }

    getEdgeColor = () => {
        return ({
            borderColor: this.props.color,
        });
    }

    getSizeStyles = () => {
        return ({
            height: this.props.height,
            width: this.props.width,
        });
    }

    getEdgeSizeStyles = () => {
        return ({
            height: this.props.borderLength,
            width: this.props.borderLength,
        });
    }

    renderLoadingIndicator = () => {
        if (!this.props.isLoading) {
            return null;
        }

        return (
            <ActivityIndicator
                animating={this.props.isLoading}
                color={this.props.color}
                size="large"
            />
        );
    }

    render() {
        return (
            <View style={[styles.container, this.getBackgroundColor()]}>
                <View style={[styles.viewfinder, this.getSizeStyles()]}>
                    <View
                        style={[
                            this.getEdgeColor(),
                            this.getEdgeSizeStyles(),
                            styles.topLeftEdge,
                            {
                                borderLeftWidth: this.props.borderWidth,
                                borderTopWidth: this.props.borderWidth,
                            },
                        ]}
                    />
                    <View
                        style={[
                            this.getEdgeColor(),
                            this.getEdgeSizeStyles(),
                            styles.topRightEdge,
                            {
                                borderRightWidth: this.props.borderWidth,
                                borderTopWidth: this.props.borderWidth,
                            },
                        ]}
                    />
                    {this.renderLoadingIndicator()}
                    <View
                        style={[
                            this.getEdgeColor(),
                            this.getEdgeSizeStyles(),
                            styles.bottomLeftEdge,
                            {
                                borderLeftWidth: this.props.borderWidth,
                                borderBottomWidth: this.props.borderWidth,
                            },
                        ]}
                    />
                    <View
                        style={[
                            this.getEdgeColor(),
                            this.getEdgeSizeStyles(),
                            styles.bottomRightEdge,
                            {
                                borderRightWidth: this.props.borderWidth,
                                borderBottomWidth: this.props.borderWidth,
                            },
                        ]}
                    />
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    },
    viewfinder: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent',
    },
    topLeftEdge: {
        position: 'absolute',
        top: 0,
        left: 0,
    },
    topRightEdge: {
        position: 'absolute',
        top: 0,
        right: 0,
    },
    bottomLeftEdge: {
        position: 'absolute',
        bottom: 0,
        left: 0,
    },
    bottomRightEdge: {
        position: 'absolute',
        bottom: 0,
        right: 0,
    },
});


Viewfinder.defaultProps = {
    backgroundColor: 'transparent',
    borderWidth: 3,
    borderLength: 20,
    color: '#1DBAF1',
    height: scaleSizeH(300),
    isLoading: false,
    width: scaleSizeH(300),
};

// 使用方式
onScan = ()=>{
    const { navigate } = this.props.navigation;
    // 跳转到扫码页面即可打开
    navigate('Scan')
}