[React-Native] React Native Sensors

모리스·2023년 4월 19일
1

React-Native

목록 보기
12/12
post-thumbnail

이번 노트에는 한 기능구현을 위해 열심히 구글링하던 중 재미난 React Native의 라이브러리를 소개해보려 한다. 나는 해당 기능이 적합하지 않다고 생각해 사용하진 않았지만 해당 라이브러리에 대해 정보가 없기도하고, 나중을 위해 박제..해 놓으려한다.


React-Native-Sensors

이번에 작성할 라이브러리는 react-native-sensors라는 라이브러리이다. react-native-sensors라이브러리는 RN앱에서 휴대폰 디바이스의 내장 센서를 사용해 가속도계(accelerometer), 자이로스코프(gyroscope), 지자기계(magnetometer), 바로미터(barometer) 센서 등을 사용할 수 있다.
npm - react-native-sensors


설치

  1. 라이브러리 npm 설치 (pod install)
npm install --save react-native-sensors

** 라이브러리가 연결되지 않았다면

react-native link react-native-sensors
  1. 권한 설정
  • Android - AndroidManifest.xml파일에 권한 설정
<uses-permission android:name="android.permission.BODY_SENSORS" />
  • iOS - Info.plist 파일에 권한 설정
<key>NSMotionUsageDescription</key>
<string>sensor를 사용하는 이유</string>

사용

react-native-sensors의 각 API는 보통 component가 mount될 때, 구독을 시작하여 unmount할 때 취소하도록 작성한다. (useEffect / componentDidMount) 나는 hook으로 작성해보려 한다.

import { accelerometer } from 'react-native-sensors';

useEffect(() => {
  // 가속도계 센서 구독
  const subscription = accelerometer.subscribe(({x, y, z, timestamp}) => {
    console.log('x, y, z, timestamp: ', x, y, z, timestamp);
  });
  
  // 구독 해제
  return () => subscription.unsubscribe();
}, []);
  

위 코드는 휴대폰을 움직였을 때, 가속도계 센서의 값을 받아오는 코드이다.
또 센서 데이터를 받아 업데이트하는 주기도 설정할 수 있다. 라이브러리를 설치하면 android에서는 0ms이하 단위의 업데이트는 지원하지 않아 업데이트 주기도 설정해 주어야한다.

import { setUpdateIntervalForType, SensorTypes, accelerometer } from 'react-native-sensors';

useEffect((), {
  // 1초에 한번 씩 업데이트 (default 100ms)
  setUpdateIntervalForType(Sensor.Types.accelerometer, 1000);
  
  const subscription = accelerometer.subscribe(({x, y, z, timestamp}) => {
    console.log('x, y, z, timestamp: ', x, y, z, timestamp);
  });
  
  return () => subscription.unsubscribe();
}, []);

이제 가속도 센서의 데이터는 1초에 한번씩 업데이트 된다. 기본값은 100ms이다.

react-native-sensors 관련 문서

profile
모바일 앱 개발 노트 :)

1개의 댓글

comment-user-thumbnail
2024년 4월 18일

혹시 ios에서 에러는 안났나요? 저는 계속 Native modules for sensors not available. Did react-native link run successfully?, 이 에러가 떠서요 ㅠㅠ

답글 달기