Este es un ejemplo de escáner de código de barras y código QR usando la cámara en React Native . Para hacer un escáner de código de barras y código QR en React Native vamos a utilizar una biblioteca muy buena proporcionada por Wix named react-native-camera-kit. Esta biblioteca es muy fácil de integrar y el rendimiento para escanear el código de barras o QR Code es muy bueno.
Un código de barras fue el primero en llegar al mercado para almacenar números pequeños y la representación de la información es de una dimensión.
El código QR es la versión actualizada del código de barras y almacena más información que el código de barras y la representación de la información tiene 2 dimensiones.
Si está creando una aplicación que necesita compartir un pequeño código / datos / URL entre usuarios en presencia física, entonces el código QR es lo mejor para integrar en su aplicación.
UPI o las aplicaciones de transacciones de pago son el ejemplo común en el que un usuario muestra el Código QR y el otro usuario escanea el Código QR para iniciar el pago. Si tiene la misma utilidad que necesita para crear el código QR, puede seguir el ejemplo para generar el código QR en la aplicación React Native .
En este ejemplo, creará el escáner de código de barras y código QR utilizando React Native Camera. Haremos una pantalla de inicio con un botón para abrir el escáner de código de barras y código QR, esto abrirá una cámara con la funcionalidad de código de barras y escaneo QR y después de escanear el código de barras o código QR, llevaremos los datos a la pantalla de inicio y mostraremos allí.
Si los datos escaneados serán una URL, mostraremos un botón adicional para abrir la URL en el navegador predeterminado usando React Native Linking Component. Entonces empecemos.
Comenzar con React Native lo ayudará a saber más sobre la forma en que puede hacer un proyecto React Native. Vamos a utilizar react-native init para crear nuestra aplicación React Native. Suponiendo que tiene un nodo instalado, puede usar npm para instalar la react-native-cliutilidad de línea de comando. Abra la terminal y vaya al espacio de trabajo y ejecute.
npm install -g react-native-cliEjecute los siguientes comandos para crear un nuevo proyecto React Native
react-native init ProjectNamePara hacer el escáner de código de barras y código QR vamos a utilizar un CameraKitCameraScreen componente de la react-native-camera-kit biblioteca. Para instalar esta biblioteca, abra la terminal y salte a su proyecto
npm install react-native-camera-kit --saveDespués de la actualización de React Native 0.60, han introducido el enlace automático, por lo que no necesitamos vincular la biblioteca, pero necesitamos instalar pods. Entonces, para instalar pods, use
cd ios && pod install && cd ..Estamos usando una cámara API nativa para escanear el código de barras y el código QR, por lo que debemos agregar permiso al AndroidManifest.xmlarchivo para acceder a él.
Agregue los siguientes permisos en su AndroidMnifest.xml. Vaya a QR ScannerExample
android -> aplicación -> principal -> AndroidMnifest.xml.
<uses-permission android:name="android.permission.CAMERA"/>Para ejecutar el proyecto en un dispositivo virtual Android o en un dispositivo de depuración real
react-native run-android