Генерация и сканирование QR-кода React Native

React Native

Сканирование QR-кода уже является очень распространенной функцией в мобильных приложениях.Осуществить сканирование кода на нативной стороне очень просто.Android обычно использует для его реализации библиотеку ZXing, а iOS может использовать собственный SDK, ZXing или ZBar SDK для реализации Это. Есть два способа реализовать сканирование QR-кода в React Native:

  • Нативная сторона инкапсулирует компонент функции сканирования, а функция рендеринга на стороне RN ссылается на него в виде метки.
  • Собственная сторона напрямую реализует все функции, а сторона RN напрямую переходит к интерфейсу собственного кода сканирования.

В первом методе обработка бизнес-логики, связанная со сканированием кода, по-прежнему выполняется на стороне RN. Поскольку основная часть нашего проекта основана на RN, здесь описан только первый способ реализации сканирования кода, второй способ также проще в реализации, и те, кто знаком с нативной разработкой, должны знать, как это сделать.

Здесь я использую стороннийreact-native-cameraреализовать функцию сканирования. Генерация QR-кода используетreact-native-qrcode-svg. Ниже приведены рендеры кода сканирования Android и iOS:

android.jpg ios.png

Создание QR-кода относительно просто.Давайте сначала объясним, как создать QR-код в RN.

Сгенерировать QR-код

Раньше я искал библиотеку RN для генерации QR-кода на github, и многие люди, похоже, используютreact-native-qrcode. Я также попробовал это сам, и я действительно могу сгенерировать QR-код, но сгенерированный QR-код не может быть распознан, независимо от того, использую ли я WeChat, Alipay или любое другое приложение, в котором есть функция сканирования кода, поэтому QR-код, сгенерированный этой библиотекой, Есть проблема, его вообще нельзя использовать.

После поиска и практики я нашелreact-native-qrcode-svgЭто действительно эффективная библиотека генерации QR-кода на стороне RN. Интеграция также очень проста, используйте команду npm install --save или yarn add для установки.react-native-qrcode-svg,react-native-svg,Потомreact-native link react-native-svgВот и все.

react-native-svgдаreact-native-qrcode-svgБазовая библиотека должна быть установленаreact-native-communityОткрытый исходный код, более высокая надежность. После завершения интеграции использование выглядит следующим образом:

<QRCode
    value={"This is a QR code string, string cannot be null"}
    size={140}
/>

Следует отметить, что значение не может быть пустой строкой "" или нулевым значением, иначе будет сообщено об ошибке. Генерация QR-кода может быть распознана путем сканирования с помощью любого приложения, которое сканирует код, включая функцию сканирования кода в этой демонстрации. Конкретный эффект можно посмотреть в демо, а адрес в конце статьи.

Сканировать QR-код

Рекомендуется использовать стороннюю библиотеку для сканирования QR-кода.react-native-camera,Слишкомreact-native-communityПроизведено. Напоминаю, что многие сторонние библиотеки для сканирования кодов на стороне РН тоже зависят от этой библиотеки, а некоторые уже просрочены и больше не поддерживаются.Это самая надежная библиотека сканирования на стороне РН.

iOS-интеграция
Интеграция с iOS очень проста, просто следуйте документации и установите ее. Действуйте следующим образом:

  1. пряжа добавить реактивную камеру установить
  2. react-native link react-native-camera
  3. Откройте проект iOS с помощью Xcode, найдите TARGETS -> щелкните цель, чтобы найти справа этапы сборки -> разверните Link Binary With Libraries, удалите libRNCamera, которая входит по ссылке по умолчанию, нажмите знак + для поиска и добавьте ее снова. Это тот же этап операции, что и при связывании react-native-svg выше.
  4. Добавьте разрешение на использование камеры «Конфиденциальность — Описание использования камеры» в info.plist и укажите цель разрешения на использование.

Интеграция с Android
Интеграция на стороне Android немного великовата, а конфигурация Android в документации по react-native-camera — это слишком много. Слепая конфигурация без внимательного чтения чревата ошибками. Ниже приведена конфигурация gradle в моем демонстрационном проекте:

  1. Конфигурация андроида/сборки/градла
// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven { url "https://jitpack.io" }
        google()
    }
}

ext {
    buildToolsVersion = "26.0.3"
    minSdkVersion = 16
    compileSdkVersion = 26
    targetSdkVersion = 26
    supportLibVersion = "26.1.0"
}

subprojects {
  project.configurations.all {
     resolutionStrategy.eachDependency { details ->
       if (details.requested.group == 'com.android.support'
             && !details.requested.name.contains('multidex') ) {
          details.useVersion "26.1.0"
      }
    }
  }
}
  1. Измените дистрибутивUrl в android/gradle/wrapper/gradle-wrapper.properties на:
distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip
  1. Основная конфигурация в android/app/build.gradle выглядит следующим образом (начиная со строки «android {»):
android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion

    defaultConfig {
        applicationId "com.qrcode"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

dependencies {
    compile project(':react-native-camera')
    compile project(':react-native-svg')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

Конфигурация gradle требует особого внимания, чтобы поддерживать единообразие версии, иначе легко допустить ошибку.

  1. Добавьте разрешение в файл AndroidManifest:
<uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.VIBRATE"/>

На самом деле здесь нужны только разрешения CAMERA и VIBRATE (вибрация), потому что мы используем только функцию сканирования кода react-native-camera, а запись видео и чтение и запись хранилища бесполезны.

Код сканирования бокового вызова RN

Создайте новую страницу js в качестве страницы кода сканирования и визуализируйте компонент RNCamera в функции рендеринга. Следует отметить, что в демонстрации я указал тип категории кода сканирования компонента как для Android, так и для iOS. Поскольку нам нужно сканировать только QR-код, укажите тип, чтобы предотвратить сканирование других типов кодов.Это устанавливается в соответствии с потребностями проекта.

Поскольку нативные реализации Android и iOS различаются, при вызове компонентов в RN имена атрибутов типа несовместимы, в iOS это barCodeTypes, который представляет собой массив и может указывать несколько типов кода сканирования:

<RNCamera
    style={styles.preview}
    type={RNCamera.Constants.Type.back}
    barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
    flashMode={RNCamera.Constants.FlashMode.auto}
    onBarCodeRead={(e) => this.barcodeReceived(e)}
>

В Android это googleVisionBarcodeType, который используется для одного типа кода сканирования:

<RNCamera
    style={styles.preview}
    type={RNCamera.Constants.Type.back}
    googleVisionBarcodeType={RNCamera.Constants.GoogleVisionBarcodeDetection.BarcodeType.QR_CODE}
    flashMode={RNCamera.Constants.FlashMode.auto}
    onBarCodeRead={(e) => this.barcodeReceived(e)}
>

Суммировать

На данный момент RN завершил вызов третьей стороны для сканирования кода и создания QR-кода. В основном используются следующие библиотеки:

  1. react-native-camera
  2. react-native-qrcode-svg
  3. react-native-svg

Код сканирования RN с помощью react-native-camera, интерфейс можно настроить самостоятельно. Более надежно использовать react-native-qrcode-svg и react-native-svg для генерации QR-кодов.

Демонстрационный адрес:GitHub.com/Nobody Arron at/Hot…

Категории