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

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

지난 포스트 Review

[이전 포스트로 이동]

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

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

5. cdm 내부 수정하기

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

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

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

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

직동 테스트

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

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

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

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

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이 적용되지 않아서 잘 보이진 않지만 잘 작동하는 것이 확인된다.
hasPermission이 null일 때를 확인하고 싶으면 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, ActivityIndicator를 CenterView로 감싸줍니다.

ActivityIndicator에 props를 추가합니다.
size는 enum값을 받으며 0은 small 1은 large다.

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

작동 테스트

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

8. 카메라 띄위기

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

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

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

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

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

작동 테스트

주의 사항

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

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

그냥 제 방입니다..

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