[React Native] rn qrScanner 사용하기

RuLu·2024년 12월 8일

React-Native

목록 보기
10/13
post-thumbnail

https://github.com/moaazsidat/react-native-qrcode-scanner#readme

설치

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

사전설정

IOS

  1. ios 폴더 하위의 'your_project/ios/your_project/Info.plist’ 경로에 아래 코드 추가
<key>NSCameraUsageDescription</key>
	<string>기능 결과 등록을 위해서 카메라 사용이 필요합니다.</string>
	<key>NSMicrophoneUsageDescription</key>
	<string>기능 등록 및 수정을 위해서 당신의 마이크가 필요합니다.</string>
	<key>NSPhotoLibraryUsageDescription</key>
	<string>기능 결과 등록을 위해서 앨범 사용이 필요합니다.</string>
  1. Podfile에 위치 잘보고 아래 코드 추가
target 'cluemeticTests' do
    inherit! :complete
    # Pods for testing
  end

	#이거 아래 두줄 추가
  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"

  post_install do |installer|

AOS

  1. 안드로이드 폴더 하위 android/app/build.gradle 에 추가
android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' //이거 넣음
  }
}
  1. android/app/src/main/AndroidManifest.xml 에 추가
<uses-permission android:name="android.permission.VIBRATE"/>

pod install에서 에러 날 경우

[!] No podspec found for Permission-Camerain../node_modules/react-native-permissions/ios/Camera``

이 에러는 내문제라기 보단 Permission 라이브러리의 호환성 문제일 가능성이 큼

버전을 3.0.0 으로 내리면 없어지는 문제임

실행시 QR 스캐너에서 에러 날 경우

Permission쪽에서 TypeError: Cannot read property 'request' of undefined 이런 에러가 뜨면 캐시 지우면 됨

  1. 설정 > 일반 > 저장공간 > 개발자 도구

xcode 관련 캐시 삭제

  1. Npm 캐시 삭제 후 실행
npm start --reset-cache

Xcode는 카메라 사용이 불가능하다..!!!!!!!🥺

profile
프론트엔드 개발자 루루

0개의 댓글