React Native - это мобильная платформа, предназначенная для создания приложений для Android и iOS с использованием JavaScript. Она создана Facebook и основана на библиотеке React. В этом руководстве мы расскажем, как с помощью React Native создать сканер штрих-кода Android.

Давайте начнем с открытия терминала или командной строки в зависимости от того, какую операционную систему вы используете (например, Unix или Windows), а затем выполните следующую команду для создания нового проекта React Native.

react-native init ReactBarcodeScannerProject

После успешного создания нового проекта пора установить react-native-camera, которая также поддерживает сканирование штрих-кода.

Итак, перейдите в корневой каталог вашего проекта.

cd ReactBarcodeScannerProject

Просто запустите эти две команды, чтобы установить и связать компонент React Camera.

npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save react-native link react-native-camera

Для Android 7 или более поздней версии вам также необходимо добавить разрешение на вибрацию в свой AndroidManifest.xml

поэтому откройте android / app / src / main / AndroidManifest.xml, затем добавьте

<uses-permission android:name="android.permission.VIBRATE"/>

Итак, теперь мы готовы использовать компонент React Camera для сканирования штрих-кодов.

Вы можете сканировать любой формат штрих-кода из этого списка: UPC E, CODE 39, CODE 39 MOD 43, EAN 13, EAN 8, CODE 93, CODE 138, PDF 417, QR, AZTEC.

Вот сценарий, который мы собираемся реализовать: мы собираемся запустить заднюю камеру, затем начать сканирование, когда штрих-код будет успешно найден, мы собираемся скрыть камеру, а затем открыть отсканированные данные штрих-кода.

Теперь приступим к кодированию.

Перейдите на index.android.js

Первым делом нужно импортировать React и другие зависимости:

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Linking, Vibration, Dimensions } from 'react-native'; import Camera from 'react-native-camera';

Затем мы добавляем эти методы:

getInitialState() { return { scanning: true, cameraType: Camera.constants.Type.back } }

Что будет устанавливать внутреннее состояние компонента с двумя переменными

сканирование: решите, будем ли мы отображать или скрывать камеру.

cameraType: указывает компоненту камеры использовать заднюю камеру.

Следующий

_handleBarCodeRead(e) { Vibration.vibrate(); this.setState({scanning: false}); Linking.openURL(e.data).catch(err => console.error('An error occured', err)); return; }

Этот метод вызывается, когда мы успешно сканируем штрих-код с помощью камеры.

он сначала вибрирует устройство, устанавливает переменную состояния сканирования в значение false, а затем открывает данные отсканированного штрих-кода.

Далее метод рендеринга

render() { if(this.state.scanning) { return ( <View style={styles.container}> <Text style={styles.welcome}> Barcode Scanner </Text> <View style={styles.rectangleContainer}> <Camera style={styles.camera} type={this.state.cameraType} onBarCodeRead={this._handleBarCodeRead.bind(this)}> <View style={styles.rectangleContainer}> <View style={styles.rectangle}/> </View> </Camera> </View> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} </Text> </View> ); } else{ return (<View style={styles.container}> <Text style={styles.welcome}> Barcode Scanner </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} </Text> </View>); } } }

Если сканирование верно, мы показываем камеру

<Camera style={styles.camera} type={this.state.cameraType} onBarCodeRead={this._handleBarCodeRead.bind(this)}> </Camera>

со свойством type, установленным на back, и onBarCodeRead в наш метод _handleBarCodeRead.

Затем добавляем стили.

Вот полный компонент

import React, { Component } from 'react';
    import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Linking,
    Vibration,
    Dimensions
    } from 'react-native';
import Camera from 'react-native-camera';
export default class ReactBarcodeScannerProject extends Component {
    
    _handleBarCodeRead(e) {
        Vibration.vibrate();
        this.setState({scanning: false});    
        Linking.openURL(e.data).catch(err => console.error('An error occured', err));
        return;
    }  
    getInitialState() {
            return {
                scanning: true,
                cameraType: Camera.constants.Type.back
            }
    }   
    render() {
        if(this.state.scanning) {
        return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
            Barcode Scanner
            </Text>
            <View style={styles.rectangleContainer}>
            <Camera style={styles.camera} type={this.state.cameraType} onBarCodeRead={this._handleBarCodeRead.bind(this)}>
                <View style={styles.rectangleContainer}>
                <View style={styles.rectangle}/>
                </View>            
            </Camera>
            </View>
            <Text style={styles.instructions}>
            Double tap R on your keyboard to reload,{'\n'}
            </Text>
        </View>
        );
        }
        else{
        return (<View  style={styles.container}>
            <Text style={styles.welcome}>
            Barcode Scanner
            </Text>      
            <Text style={styles.instructions}>
            Double tap R on your keyboard to reload,{'\n'}
            </Text>     
        </View>);
        }
    }
    }
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    camera: {
        flex: 0,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent',
        height: Dimensions.get('window').width,
        width: Dimensions.get('window').width,
    },  
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    rectangleContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent',
    },
rectangle: {
        height: 250,
        width: 250,
        borderWidth: 2,
        borderColor: '#00FF00',
        backgroundColor: 'transparent',
    },  
    });
AppRegistry.registerComponent('ReactBarcodeScannerProject', () => ReactBarcodeScannerProject);

Это простой пример без расширенного пользовательского интерфейса, чтобы показать вам, как реализовать сканирование штрих-кода с помощью компонента React Native Camera.

Вывод

Итак, мы видели, как использовать React Native Camera для сканирования штрих-кодов с различными форматами или типами. Это приложение было создано для Android, но вы можете очень легко использовать для iOS. На самом деле вам не нужно ничего менять, поскольку код не использует компоненты для конкретной платформы, вам просто нужно поместить этот код в index.ios.js вместо index.android.js или, что еще лучше, поместить его в общий файл.

Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий ниже.

Поделиться в Twitter Поделиться в Facebook Поделиться в Google+

Первоначально опубликовано на www.techiediaries.com / reactnative-android-barcode-scanner /