React Native 애플리케이션에서 QR 코드를 생성하고 다운로드하는 방법

배경:
QR 코드는 데이터를 저장하는 스캔 가능한 코드입니다. QR은 빠른 응답을 의미합니다. 예를 들어 슈퍼마켓에 있는 품목에는 품목 이름, 만료 날짜, 제품 제조업체에 대한 세부 정보(예: 전화 번호 등)가 포함된 QR 코드가 있는 정보에 액세스하는 데 큰 역할을 합니다.

코딩에🥳
해당 배경 정보를 사용하여 반응 네이티브 애플리케이션에서 QR 코드를 생성하고 다운로드하는 방법을 자세히 살펴보겠습니다. 먼저 react-native-svg 및 react-native-qrcode-svg라는 2개의 종속성 패키지를 설치해야 합니다.
npm 또는 yarn을 사용하여 아래 명령을 사용하여 프로젝트의 루트 디렉토리 아래에 두 종속성을 설치할 수 있습니다.

npm i -S react-native-svg react-native-qrcode-svg

또는

yarn add react-native-svg react-native-qrcode-svg

재사용 가능한 구성 요소 QRCODE 예
다음 예에서는 QRCODE라는 재사용 가능한 후크 구성 요소를 만듭니다.

import React from 'react';
import QRCode from 'react-native-qrcode-svg';

const QRCODE = ({value, getRef}) => {
    return(
        <QRCode
        value={value}
        size={250}
        color="black"
        backgroundColor="white"
        getRef={getRef}
        />
        )
    }

export default QRCODE

위의 후크에서 react-native-qrcode-svg 패키지에서 QRCode를 가져옵니다. 그런 다음 사용자 정의 재사용 가능한 후크 QRCODE는 2개의 소품, 즉 value & getRef를 사용합니다. value는 QR 코드의 문자열 값(QR 코드를 스캔할 때 표시되는 정보)인 반면 getRef는 추가로 사용할 수 있는 QR 코드의 svg ref입니다(다운로드/저장할 때 볼 예정임). 이 QR 코드를 갤러리로).

return 문에서 종속성에서 QRCode 후크에는 QR 코드의 값, 크기, 색상 및 getRef 소품과 같은 소품이 있습니다.

재사용 가능한 후크 QRCODE 사용
다음 코드 예제에서는 위에서 만든 재사용 가능한 후크를 사용하여 QR 코드를 생성하는 방법을 보여줍니다.

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import QRCODE from '../components/QRcode';

const App = () => {

  const initialItemState ={
    name: 'Sugar',
    expiryDate: '2023-12-31',
    manufacturer: 'Kakira Sugar Estate'
  }

  const [item, setItem] = useState(initialItemState);
  const [productQRref, setProductQRref] = useState();

  return (
  <View>
   <QRCODE 
      value={JSON.stringify({
       name: item.name,
       expiry: item.expiryDate,
       manufacturer: item.manufacturer
      })}
      getRef={(c) => setProductQRref(c)}/>
  </View>
  )
}
export default App;

const styles = StyleSheet.create({
   container:{
    flex: 1,
    alignItems: 'center'
  }
});

위의 코드에서 이전에 생성한 재사용 가능한 후크를 가져온 다음 속성, 값 및 getRef를 해당 값과 함께 전달합니다. 값은 키가 있는 항목입니다. 이름, 만료일 및 제조업체. QRCODE에 대한 value prop은 문자열이기 때문에 JSON.stringify를 사용하여 항목 개체를 문자열로 변환합니다.

생성된 QR코드를 갤러리로 다운로드
글쎄, 나는 QR 코드의 svg 참조를 얻기 위해 QRcode에 전달된 속성으로 useRef에 대해 이야기했습니다.
이 경우 위 코드에서 볼 수 있듯이 setProductQRref 후크를 사용하여 QR 코드의 svg ref 상태를 저장합니다.

QR 코드를 갤러리에 저장하려면 @react-native-community/cameraroll 및 react-native-fs라는 두 가지 종속성이 필요합니다. @react-native-community/cameraroll은 로컬 카메라 롤 또는 사진 라이브러리에 대한 액세스를 제공하는 react-native 네이티브 모듈이고 react-native-fs는 react-native에서 파일 시스템을 쉽게 사용할 수 있게 해주는 라이브러리입니다.

사진 갤러리에 QR 코드를 저장하는 코드 예제

import { 
Platform,
PermissionsAndroid,
ToastAndroid }
 from 'react-native';
import RNFS from "react-native-fs";
import CameraRoll from "@react-native-community/cameraroll";

 const saveQrToDisk = async(item) => {

if (Platform.OS === "android" &&
 !(await hasAndroidPermission())) {
     return;
}

if(productQRref){

productQRref.toDataURL((data) => {

let filePath =  RNFS.CachesDirectoryPath+`/${item.name}.png`;
RNFS.writeFile(filePath, data, 'base64')
  .then((success) => {
    return CameraRoll.save(filePath, 'photo')
  })
 .then(() => {
ToastAndroid.show('QRCode saved to gallery', ToastAndroid.LONG);
          });
   });
   }
 }

const hasAndroidPermission = async() => {
const permission=
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;

  const hasPermission = 
await PermissionsAndroid.check(permission);
  if (hasPermission) {
    return true;
  }

  const status = await PermissionsAndroid.request(permission);
  return status === 'granted';
}

saveQrToDisk는 QR 코드를 갤러리에 저장하는 데 사용되는 함수 이름이며, 이전 코드 예제에서 생성한 QR 코드의 svg 참조인 productQRref를 사용합니다. toDataURL 함수는 QR 코드 이미지의 표현을 포함하는 데이터 URL을 반환합니다. 가져온 RNFS 후크는 QR 코드의 filePath를 디스크에 기록합니다. 경로가 최종적으로 작성되면 CameraRoll.save 후크를 사용하여 디스크에 생성된 파일 경로에 QR 코드를 저장합니다.

hasAndroidPermission 후크는 활성화되지 않은 경우 전화 저장소에 쓸 수 있는 권한을 요청하는 데 사용됩니다.

QR 코드 생성 및 다운로드를 위한 전체 코드 예제

import React, { useState } from 'react';
import { View, StyleSheet,Platform, PermissionsAndroid,
         ToastAndroid, Text, TouchableOpacity  } 
from 'react-native';
import QRCODE from '../components/QRcode';
import RNFS from "react-native-fs";
import CameraRoll from "@react-native-community/cameraroll";

const App = () => {

  const initialItemState ={
    name: 'Sugar',
    expiryDate: '2023-12-31',
    manufacturer: 'Kakira Sugar Estate'
  }

  const [item, setItem] = useState(initialItemState);
  const [productQRref, setProductQRref] = useState();

const saveQrToDisk = async() => {

if (Platform.OS === "android" &&
 !(await hasAndroidPermission())) {
     return;
}

if(productQRref){

productQRref.toDataURL((data) => {

let filePath =  RNFS.CachesDirectoryPath+`/${item.name}.png`;
RNFS.writeFile(filePath, data, 'base64')
  .then((success) => {
    return CameraRoll.save(filePath, 'photo')
  })
 .then(() => {
ToastAndroid.show('QRCode saved to gallery', ToastAndroid.LONG);
          });
   });
   }
 }

 const hasAndroidPermission = async() => {
const permission=
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;

  const hasPermission = 
await PermissionsAndroid.check(permission);
  if (hasPermission) {
    return true;
  }

  const status = await PermissionsAndroid.request(permission);
  return status === 'granted';
}

  return (
  <View style={styles.container}>
    <Text style={styles.qrText}>QR Code</Text>
   <QRCODE 
      value={JSON.stringify({
       name: item.name,
       expiry: item.expiryDate,
       manufacturer: item.manufacturer
      })}
      getRef={(c) => setProductQRref(c)}/>
  <TouchableOpacity 
      style={styles.button}
      onPress={() => { saveQrToDisk() }}>
     <Text style={styles.save}>Save to Gallery</Text>
   </TouchableOpacity>
  </View>
  )
}
export default App;

const styles = StyleSheet.create({

  container:{
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center'
  },

  button: {
    borderRadius:30,
    padding:15,
    position: 'absolute',
    bottom: 0,
    width: '90%',
    justifyContent: 'center',
    alignItems: 'center',
    fontWeight: 'bold',
    marginBottom: 30,
    color: '#fff',
    backgroundColor:"#273746"
  },

  qrText: {
    top: -20,
    color: '#000',
    fontSize:18,
    fontWeight: 'bold'
  },

  save: {
    color: '#fff',
    fontSize:16,
    textTransform: 'capitalize'
 }
});

에뮬레이터 또는 전화 장치 화면에 출력


이것이 QR 코드를 생성하고 반응 네이티브 애플리케이션의 갤러리에 저장하는 방법입니다. 이 기사를 읽어 주셔서 감사합니다. 오늘은 수업이 길었어요 앗!!!😌 그래도 감사합니다!!🤗