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

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

지난 포스트 Review

[이전 포스트로 이동]

  1. 프로젝트 생성하기
  2. App.js 수정하기
  3. 필요한 모듈 추가하기
  4. 카메라 접근 권한 얻기

마지막까지 해서 우리는 카메라 권환이 승인될 경우
granted라는 status를 얻을 수 있었습니다.
이번 포스트는 status를 이용해 state를 변경하고
state에 따라 다른 화면이 보여지도록 하겠습니다.

5. cdm 내부 수정하기

cdmcomponentDidMount를 줄여서 작성했습니다.
우리가 얻은 status즉 권한 여부를 가지고 state를 변경해봅시다.

componentDidMount = async () => {
  const { status } = await Permissions.askAsync(Permissions.CAMERA)

  if (status === 'granted') {
    this.setState({ hasPermission: true })
  } else {
    this.setState({ hasPermission: false })
  }
}

권한 설정으로 얻어온 값 즉 statusgranted인 경우
카메라 권한이 혀용된 상태이므로 현재 화면의 statehasPermission
true로 변경하고 그렇지 않은 경우 거절된 상태이므로 false로 변경합니다.

직동 테스트

render함수 내부에서 console.log(this.state);를 해봅시다.

아직 안만듬

첫번째 objectcomponentDidMount실행되기 초기의 상태이고
두번째 objectcomponentDidMount실행의 상태이다.
이로써 우리는 권한 여부에 따라 화면을 조절할 수 있는 state를 갖게 되었다.

6. 권한에 따라 다른 화면 보여주기

styled-component를 사용하기 위해 기본 생성되어 있는 stylesheet는 지워준다.
render함수 내부에서 statehasPermission을 가져와 사용한다.

render () {
    const { hasPermission } = this.state;

    if (hasPermission === true) {
        // 권한 설정이 되었을 경우 보여줄 곳
    } else if (hasPermission === false) {
        // 권한 설정이 되지 않았을 경우 보여줄 곳
    } else {
        // 권한 설정 전 로딩 화면을 보여줄 곳
    }
}

위와 같은 방식으로 조건문을 이용해 다른 화면을 보여준다.
아무 스타일 없이 아래와 같이 일단 작성해보자.

render() {
    const { hasPermission } = this.state;

    if (hasPermission === true) {
        return <Text>Has Permission</Text>;
    } else if (hasPermission === false) {
        return <Text>Don't have Permission for this App.</Text>;
    } else {
        return <ActivityIndicator />;
    }
}

작동 테스트

아무런 style이 적용되지 않아서 잘 보이진 않지만 잘 작동하는 것이 확인된다.
hasPermissionnull일 때를 확인하고 싶으면 cdm내용을 지우면 된다.

아직 안만듬 아직 안만듬

7. 스타일 조금 넣기

styled-components를 사용해 화면 가운데에 보이도록 만들어 보겠습니다.

const CenterView = styled.View`
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: cornflowerblue;
`

const Text = styled.Text`
  color: white;
  font-size: 22px;
`

render내부의 Text, ActivityIndicatorCenterView로 감싸줍니다.

ActivityIndicatorprops를 추가합니다.
sizeenum값을 받으며 0small 1large다.

<ActivityIndicator color="white" size={1} />

작동 테스트

화면 가운데에 잘 보이도록 작동하는 것을 확인할 수 있다.

아직 안만듬 아직 안만듬

8. 카메라 띄위기

카메라를 띄우기 위해서 Camera를 사용하는데 여기에는 크기지정해야한다.
화면의 크기를 알기 위해서 Dimensions모듈을 추가한다.
Dimensionsget함수를 사용해 화면의 크기를 저장한다.

...
import { ActivityIndicator, Dimensions } from "react-native";

const { width, height } = Dimensions.get("window");
...

hasPermissiontrue인 부분을 아래와 같이 변경한다.

if (hasPermission === true) {
  return (
    <CenterView>
      <Camera
        style={{
          width: width - 40,
          height: height / 1.5,
          borderRadius: 10,
          overflow: 'hidden',
        }}
      />
    </CenterView>
  )
}

작동 테스트

주의 사항

  • 시뮬레이터에서는 카메라 기능을 사용할 수 없습니다.

아직 안만듬

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

그냥 제 방입니다..

다음 포스트에서는 전방/후방 카메라를 변경하는 방법에 대해서 설명해보겠습니다.


Written by@Minsu Kim
Software Engineer at KakaoPay Corp.