[리액트네이티브] react-native QR code

우산 스테이션을 인식하기 위해서

각 스테이션 마다 QR 코드를 가지고 있움

​

사용자는 스테이션의 QR코드를 스캔하여

해당 스테이션을 사용할 수 있는데

​

​

그렇게 되면 일반 카메라가 아닌

QRscan이 가능한 코드를 작성해야 한다

​

​

그래서 막 시도를 해볼건데

처음부터 되는 내용은 없었던 거 같다..

​

막 시도해볼테니 제 코드를 사용하기 전

결과 먼저 확인해보시는게 좋을거 같숩니다!

​

​

​

​

일단 첫번 째 시도!!

 

​참고 사이트:

https://flamingotiger.github.io/frontend/ReactNative/react-native-qrcode-scanner/

React native QRcode scanner 사용하기

 

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

위 install 해주고

import { useState, useRef, useEffect } from 'react';
import { Alert, Button, Dimensions, StyleSheet, Vibration, View, } from 'react-native';
import { Camera, CameraType } from 'react-native-camera-kit';



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

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

    const onBarCodeRead = (event) => {
        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>
    );
};

export default QRScanner2;


const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: Dimensions.get("window").width,
        height: Dimensions.get("window").height,
    },
    scanner: { flex: 1 },
});

오류로는

Invariant Violation: requireNativeComponent: "CKCamera" was not found in the UIManager.

라고 나왔다

 

xcode에 넣어야 한다.. 

 

개발할 당시 나는 expo로 진행하고 있어서

xcode라는 게 없었움,,

그래서 다른 코드를 찾아봤다..!

 

react native를 사용하는분들은 참고자료 보면서 개발하며 ㄴ될 것 같다..!