React Native로 카메라 사용하기 (3)

해당 포스트는 Nomad Coder의 초보를 위한 RN강의를 정리한 내용입니다.

지난 포스트 Review

[이전 포스트로 이동]

  1. componentDidMount 수정하기
  2. 카메라 권한에 따라 다른 화면 표시하기
  3. 화면에 스타일 적용하기
  4. 화면에 카메라 띄우기

지금까지 카메라 권한을 얻고 카메라를 띄우는 것까지 진행하였고
이번 포스트에는 전방/후방 카메라를 변경하는 방법에 대해 설명해보겠습니다.

9. 카메라 타입 설정

카메라의 타입은 Camera컴포넌트에 type을 속성으로 주면된다.
카메라의 속성은 CameraConstants안에 정의 되어있다.

<Camera
  style={{
    width: width - 40,
    height: height / 1.5,
    borderRadius: 10,
    overflow: 'hidden',
  }}
  type={Camera.Constants.Type.front}
/>

기본값은 Type.back이고 Type.front를 사용하면 전방 카메라가 켜진다.
위와 같이 코드를 변경해주고 전방 카메라가 켜지는지 테스트해보자.

작동 테스트

아직 안만듬

전방 카메라로 잘 작동하는 것을 확인할 수 있다.

10. 카메라 상태를 state로 추가

우리 앱의 cameraType기본 값은 전면 카메라로 설정해 사용하겠습니다.
Camera 컴포넌트에 typecameraType을 전달합니다.

state = {
    hasPermission: null,
    cameraType: Camera.Constants.Type.front
};

...

<Camera
    style={{
        width: width - 40,
        height: height / 1.5,
        borderRadius: 10,
        overflow: "hidden"
    }}
    type={cameraType}
/>

11. 전면/후면 변경 버튼 추가

필요한 모듈 추가

...
import { MaterialIcons } from "@expo/vector-icons";
...

state에 따라 다른 아이콘 표시

<MaterialIcons
  name={
    cameraType === Camera.Constants.Type.front ? 'camera-rear' : 'camera-front'
  }
  size={44}
  color="white"
/>

아이콘을 담을 View 작성

아래와 같이 IconBar를 작성하고 MaterialIcons를 감싸줍니다.

const IconBar = styled.View`
    margin-top: 40px;
`;

...

<IconBar>
    <MaterialIcons
        ...
    />
</IconBar>

작동 테스트

stateCamera.Constants.Type.frontCamera.Constants.Type.back으로
바꾸면서 화면과 아이콘의 변화를 테스트합니다.

아직 안만듬 아직 안만듬

12. 버튼을 눌렀을 때 state 변경하기

state에 따라 화면이 변화하는 것을 확인할 수 있습니다.
이제 버튼을 클릭하면 state를 변경하도록 하는 함수를 작성하겠습니다.

필요한 모듈 추가

react-nativeTouchableOpacity를 추가합니다.

import { ActivityIndicator, Dimensions, TouchableOpacity } from 'react-native'

아이콘을 TouchableOpacity로 감싸기

<TouchableOpacity>
  <MaterialIcons
    name={
      cameraType === Camera.Constants.Type.front
        ? 'camera-rear'
        : 'camera-front'
    }
    size={44}
    color="white"
  />
</TouchableOpacity>

카메라 타입 변경 함수 작성

cameraTypefront일 경우 back으로 back일 경우 front
this.setState 함수를 사용해 변경해준다.

switchCameraType = () => {
  const { cameraType } = this.state

  if (cameraType === Camera.Constants.Type.front) {
    this.setState({
      cameraType: Camera.Constants.Type.back,
    })
  } else {
    this.setState({
      cameraType: Camera.Constants.Type.front,
    })
  }
}

TouchableOpacity에 함수 전달

작성한 swithCameraType함수를 onPress속성에 전달한다.

<TouchableOpacity onPress={this.switchCameraType}>
  <MaterialIcons
    name={
      cameraType === Camera.Constants.Type.front
        ? 'camera-rear'
        : 'camera-front'
    }
    size={44}
    color="white"
  />
</TouchableOpacity>

작동 테스트

아래와 같이 잘 작동하는 것을 확인할 수 있다.

아직 안만듬

다음 포스트에서는 얼굴을 인식하고 직접 사진을 찍는 것 까지 진행해보겠습니다.


Written by@[Minsu Kim]
🌈22살 대학생 학생 개발자🙂