다람쥐 헌 쳇바퀴에 타고파

기기를 흔들면 실행되는 액션 만들기

2019년 12월 24일
React Native
우선 기기를 흔들었다는 것을 확인하기 위한 센서 라이브러리를 RN에 설치한다.
 
expo install expo-sensors
 
이 후 JS 파일을 만들고, 아래와 같이 작성한다.
본 포스팅에서의 예시로 modules/ShakeEvent.js로 만들었다 가정한다.
 
import { Accelerometer } from 'expo-sensors';

/*
  민감도 설정 부분입니다.
  수치가 너무 낮게되면 의도치 않게 이벤트가 실행될 수 있음으로, 700 ~ 800 정도의 민감도를 사용하시기 바랍니다.
*/
const THRESHOLD = 700;

export class ShakeEventExpo {
  static addListener(handler) {
    let lastX, lastY, lastZ;
    let lastUpdate = 0;
    Accelerometer.addListener(accelerometerData => {
      let { x, y, z } = accelerometerData;
      let currTime = Date.now();
      if (currTime - lastUpdate > 100) {
        let diffTime = currTime - lastUpdate;
        lastUpdate = currTime;

        let speed =
          (Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime) * 10000;

        if (speed > THRESHOLD) {
          handler();
        }
        lastX = x;
        lastY = y;
        lastZ = z;
      }
    });
  }
  static removeListener() {
    Accelerometer.removeAllListeners();
  }
}
 
이 후 위 modules/ShakeEvent.js를 import 하고 Listener를 등록한다.
 
import React from 'react';
import { View, Text } from 'react-native';
import { ShakeEventExpo } from 'modules/ShakeEvent';

class TestComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shakeCount: 0,
    };
  }

  componentDidMount() {
    const { shakeCount } = this.state;

    // addListener를 이용하여 Shake 이벤트를 등록할 수 있다.
    ShakeEventExpo.addListener(() => {
      this.setState({
        shakeCount: shakeCount + 1,
      })
    });
  }

  // 만약 다른 컴포넌트에서 Shake 이벤트를 사용하지 않으려면 removeListener를 이용하여 삭제한다.
  componentWillUnmount() {
    ShakeEventExpo.removeListener();
  }

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

    return (
      <View>
        <Text>{`${shakeCount}번 이벤트 실행됨.`}</Text>
      </View>
    );
  }
}