React native QRcode scanner 사용하기

시작하기

react-native 앱에서 QR코드를 스캔할 수 있는 스캐너를 라이브러리를 이용하여 구현해보도록 하겠습니다.
사용한 버전은 다음과 같습니다.

Xcode: 12.5

1
2
3
4
{
"react": "17.0.2",
"react-native": "0.66.4"
}

라이브러리 정하기

수많은 라이브러리 중 결론부터 말하자면 react-native-camera-kit라이브러리를 사용할 것입니다.
이 라이브러리를 정한 이유는 아래에 나와있습니다.

QR코드 스캐너 라이브러리

  • react-native-qrcode-scanner ❌ (react-native-camera)
    카메라 라이브러리필요

QR코드를 스캔하기 위해서 우선 스마트폰의 카메라 설치해야합니다.

카메라 라이브러리로는

  • react-native-camera ❌
  • react-native-vision-camera ❌
  • react-native-camera-kit ✅
    이렇게 세가지가 많이 사용되는 것으로 보입니다.

현시점에서 react-native-camera는 deprecated가 되어 더이상 업데이트가 없어서 사용하지 않습니다.
그러므로 react-native-camera와 react-native-recode-scanner는 사용할 수 없습니다.

react-native-camera 깃헙에서 react-native-vision-camera 라이브러리가 더 기능이 추가되고 성능이 향상되었다고 설명하며 링크가 연결되어 있습니다.
다만, 지금은 react-native 처음 초기 설정이후 라이브러리 설치후 빌드에서 에러가 나오는 현상이 유지되고 있기 때문에 사용하기는 어렵다고 판단이 됩니다.
(관련링크 이슈)
그래서 사용하기도 간편하고 쉬운 react-native-camera-kit라이브러리를 사용할 예정입니다.

설치하기

react-native-camera-kit 깃헙 링크

1
npm install react-native-camera-kit --save && cd ios && pod install && cd ..

위에 명령어를 사용해서 라이브러리를 설치하고 ios파일에서 pod패키지를 설치하고 다시 루트로 돌아옵니다.

카메라 권한 허용해주기

카메라를 이용하기 위해서는 권한을 허용해주어야 사용할 수 있습니다.

Android

루트 경로에서 android/src/main/AndroidManifest.xml

1
2
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

iOS

루트 경로에서 ios/PROJECT_NAME/Info.list
다음 값을 추가해줍니다.

1
2
3
4
5
<key>NSCameraUsageDescription</key>
<string>For taking photos</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>For saving photos</string>

사용하기

스캐너 컴포넌트를 생성합니다.

QRCodeScanner.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import React, { useEffect, useRef, useState } from "react";
import {
Alert,
Button,
Dimensions,
StyleSheet,
Vibration,
View,
} from "react-native";
import { Camera, CameraType } from "react-native-camera-kit";

const QRCodeScanner = () => {
const [scaned, setScaned] = useState<boolean>(true);
const ref = useRef(null);

useEffect(() => {
// 종료후 재시작을 했을때 초기화
setScaned(true);
}, []);

const onBarCodeRead = (event: any) => {
if (!scaned) return;
setScaned(false);
Vibration.vibrate();
Alert.alert("QR Code", event.nativeEvent.codeStringValue, [
{ text: "OK", onPress: () => setScaned(true) },
]);
};

return (
<View style={styles.container}>
<Camera
style={styles.scanner}
ref={ref}
cameraType={CameraType.Back} // Front/Back(default)
zoomMode
focusMode
// Barcode Scanner Props
scanBarcode
showFrame={false}
laserColor="rgba(0, 0, 0, 0)"
frameColor="rgba(0, 0, 0, 0)"
surfaceColor="rgba(0, 0, 0, 0)"
onReadCode={onBarCodeRead}
/>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
scanner: { flex: 1 },
});
export default QRCodeScanner;
App.tsx
1
2
3
4
5
6
7
const App = () => {
return (
<View>
<QRCodeScanner />
</View>
);
};

실행화면

Share