► React Native/개발일기

[React Native] 라이브러리 및 속성 사용법 (react-native-qrcode-scanner)

다람트리 2024. 1. 11. 15:58
반응형

 

서론

큐알코드를 읽는, '큐알코드 리더기' 기능을 추가하려고 한다.

 

 

라이브러리 정보

 

https://www.npmjs.com/package/react-native-qrcode-scanner?activeTab=versions

 

react-native-qrcode-scanner

A QR code scanner for React Native.. Latest version: 1.5.5, last published: 2 years ago. Start using react-native-qrcode-scanner in your project by running `npm i react-native-qrcode-scanner`. There are 26 other projects in the npm registry using react-nat

www.npmjs.com

 

 

라이브러리 적용 예시

 

1. 라이브러리 및 의존성 라이브러리 설치

 

▼ 터미널 명령어

% npm install react-native-camera 
% npm install react-native-qrcode-scanner
% npm install react-native-permissions

// react-native 0.60 버전 이하일때는 링크
% react-native link react-native-camera 
% react-native link react-native-qrcode-scanner
% react-native link react-native-permissions

 

 

2. android 환경설정

 

▼ root: 프로젝트\android\app\build.gradle\android

defaultConfig {
    applicationId "com.daramtreeapp"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 38 //37
    versionName "1.4.9" //1.4.8
    /* 아래내용 추가하기 */
    missingDimensionStrategy 'react-native-camera', 'general'	
    missingDimensionStrategy 'react-native-camera', 'mlkit'	
    multiDexEnabled true	// multiDex 에러를 위해 미리 추가해두는 것이 좋음

 

 

3. ios 환경설정

 

▼ root: 프로젝트\ios\프로젝트App\Info.plist

/* 아래내용 추가하기 */
<key>NSCameraUsageDescription</key>
<string>기능 결과 등록을 위해서 카메라 사용이 필요합니다.</string>
<key>NSMicrophoneUsageDescription</key>
<string>기능 등록 및 수정을 위해서 당신의 마이크가 필요합니다.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>기능 결과 등록을 위해서 앨범 사용이 필요합니다.</string>

 

▼ root: 프로젝트\ios\Podfile

target 'daramtreeApp' do

  /* 아래내용 추가하기 */
  # Permissions (퍼미션 요청을 위한 코드 추가)
  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
  /* ~~ 여기까지 */  
  pod 'RNPermissions', :path => '../node_modules/react-native-permissions'

  # Pods for daramApp
  pod .....
end

 

 

참고링크

 

https://jw910911.tistory.com/71

 

React-Native : qrcode 스캐너 이용하기

React-Native로 QR코드 인식 카메라 구현해보기 React-Native로 개발하던중 qrcode를 사용할 일이있어서, 해당 react-native-qrcode-scanner라는 라이브러리를 찾게 되었습니다.. 외국문서는 많이 있지만 한글로

jw910911.tistory.com

 

개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D

 

반응형