리액트 네이티브 QR코드 화면

3가지 설치가 필수이다.

yarn add react-native-camera
yarn add react-native-qrcode-scanner
yarn add react-native-permissions

For iOS
‘qrCodeApp/ios/qrCodeApp/Info.plist’.
Add the code below:

iOS 10
With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the info.plist of your project. This should be found in 'your_project/ios/your_project/Info.plist'. Add the following code:

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microsphone is accessed for the first time</string>

//위에 추가하라는 걸 info.plist에 추가했었는데 빌드가 계속 안됐다.
애써 흐린눈하고 안드로이드 기준으로 먼저 화면을 어느정도 완성시킨 후 ios빌드를 재도전했다..
이유는 역시 내가 멍청한...^^
Info.plist에 <key></key> + <string> </string> 이 한쌍(?) 인데

내가 저 key와 string으로 구성된 array 사이에 추가를 해놨었다....^^
계속 보다보니 왜 얘는 key에서 끝나지? 하고 이상함을 감지해서 위치를 옮기니 빌드가 된다...어이가 없네 내 자신..
Info.plist가 무엇인지 공부하자 -> 리엑트 네이티브 에러 글

For Android
android/app/src/main/AndroidManifest.xml file:

<!-- Required -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- Include this only if you are planning to use the camera roll -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Include this only if you are planning to use the microphone for video recording -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

android/app/build.gradle:

  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

배경화면을 가득 채워야 하는데 backgroundImage가 먹히지 않는다?
react-native는 왜이렇게 안되는 게 많을까?

<ImageBackground ><ImageBackground /> 컴포넌트를 사용해서 해결!

react-native-qrcode-scanner
참고하기