[React Native] react-native-stopwatch-timer

React Native react-native-stopwatch-timer API를 사용한 stopwatch 구현

React Native 앱 개발 중 스탑워치를 API를 사용해서 구현하는 것을 알려드립니다.

npm에서 제공하는 기본 코드는 class component 형식을 사용하고 있는데요,

요즘 방식인 hooks functional component 방식으로 변경해서 사용하는 방법을 보여드리겠습니다.

 

우선 아래 코드를 입력해서 react-native-stopwatch-timer를 설치해 줍니다.

npm install react-native-stopwatch-timer

이 API는 시간초가 증가하는 stopwatch랑 timer 두 가지를 제공하는데요,

저는 stopwatch만 사용해서 하는 방법을 보여드리겠습니다.

 

StopWatchAPI

import React, { Component, useState } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import { Stopwatch, Timer } from 'react-native-stopwatch-timer';

const StopWatchAPI = ({

}) => {

  const [start, setStart] = useState(false);
  const [reset, setReset] = useState(false);

  toggleStopwatch = () => {
    setStart(!start);
    setReset(false);
  }

  resetStopwatch = () => {
    setStart(false);
    setReset(true);
  }

  return (
    <View>
      <Stopwatch laps msecs  start={start}
        reset={reset}
        options={options}
        getTime={(time) => {}} />
      <TouchableHighlight onPress={toggleStopwatch}>
        <Text style={{ fontSize: 30 }}>{!start ? "Start" : "Stop"}</Text>
      </TouchableHighlight>
      <TouchableHighlight onPress={resetStopwatch}>
        <Text style={{ fontSize: 30 }}>Reset</Text>
      </TouchableHighlight>
    </View>
  )
}

const options = {
  container: {
    backgroundColor: '#000',
    padding: 5,
    borderRadius: 5,
    width: 220,
  },
  text: {
    fontSize: 30,
    color: '#FFF',
    marginLeft: 7,
  }
};

export default StopWatchAPI;

<Stopwatch /> 태그로 감싸진 부분이 시간초를 보여줍니다.

- msecs 를 해주시면 밀리초단위까지 보여주고, 제거해주시면 초 단위로만 보여줍니다.

- options는 style을 생각하시면 됩니다.

- getTime에는 log등의 이벤트를 등록하여 rendering될 때마다 이벤트를 수행합니다.

 

Start와 stop을 상태에 따라서 표시하게 하였는데요, 재생과 멈춤이 한 버튼에 있다고 생각하시면 됩니다.

toggleStopwatch 함수를 호출하여 실행 상태를 변경시켜줍니다.

이 상태에 따라 Stopwatch의 start가 true값이면 동작하고, false면 멈춥니다.

 

Reset 동작은 실행상태를 false로 바꾸고 시간초를 초기화 해줍니다.

resetStopwatch 함수를 호출하여 상태를 변경시켜줍니다.

reset 상태에 따라 Stopwatch의 reset이 true면 초기화를 시켜줍니다.

 

다만 이 API를 사용하여 stopwatch 출력 형식을 바꾸는 방법은 잘모르겠습니다...