[프로젝트-DediCats] Devlog-13

김대연·2020년 2월 20일
0

Project DediCats

목록 보기
14/16

프로젝트 개발 초기에는 빌드한 앱을 구글 플레이스토어와 앱스토어 둘 다 배포할 계획이었지만, 검색해보니 앱스토어의 검수과정과 기간이 1달 동안의 결과물로는 맞추기 어렵다는 쪽으로 의견이 모아져 플레이스토어 출시에 목표를 집중하기로 했다.

안드로이드에 맞추려면 어떤 부분을 보완해야할까 찾아보니 가장 많이 나온 게 안드로이드 하단 버튼 탭이었다. 특히 하트웨어의 뒤로가기 버튼에도 똑같이 이벤트를 달아줘야 화면 내 뒤로가기처럼 작동한다.

react-nativeBackHandler 컴포넌트가 이러한 이벤트 처리를 도와준다. 아래 (스타일 제외)코드가 예시이다.

import React from 'react';
import { inject, observer } from 'mobx-react';
import { StyleSheet, View, BackHandler } from 'react-native'; // import BackHandler
import { Container, Spinner } from 'native-base';
import CatProfile from '../components/catInfo/CatProfile';
import CatInfoTabs from '../components/catInfo/CatInfoTabs';


class CatInfo extends React.Component {
  // DidMount에서 handleAndroidBackButton 실행
  componentDidMount() {
    this.handleAndroidBackButton();
  }
  
  // WillUnMount때 이벤트 제거
  componentWillUnmount() {
    this.removeAndroidBackButtonHandler();
  }
  
  handleAndroidBackButton = () => {
    const {
      navigation,
      resetRainbowReport,
      selectedCatRainbowOpen,
      toggleRainbowOpen,
      resetCatCut,
    } = this.props;
    // 'hardwareBackPress'이벤트를 추가해서 호출할 함수들을 추가.
    BackHandler.addEventListener('hardwareBackPress', async () => {
      resetRainbowReport();
      if (selectedCatRainbowOpen === true) {
        toggleRainbowOpen();
        resetCatCut();
      }
      // props로 받은 navigation 을 이용해 goBack()을 실행
      navigation.goBack();
      return true;
    });
  };

  // WillUnmount 에서 호출될 이벤트 제거 함수
  removeAndroidBackButtonHandler = () => {
    BackHandler.removeEventListener('hardwareBackPress', () => {});
  };

  render() {
    const { selectedCatBio } = this.props;
    if (selectedCatBio) {
      return (
        <Container>
          <View style={styles.profile}>
            <CatProfile />
          </View>
          <View style={styles.tabs}>
            <CatInfoTabs />
          </View>
        </Container>
      );
    }
    return <Spinner style={styles.spinner} color="#6772F1" />;
  }
}

export default inject(({ cat }) => ({
  selectedCatBio: cat.selectedCatBio,
  resetRainbowReport: cat.resetRainbowReport,
  selectedCatRainbowOpen: cat.selectedCatRainbowOpen,
  toggleRainbowOpen: cat.toggleRainbowOpen,
  resetCatCut: cat.resetCatCut,
}))(observer(CatInfo));

조금씩 기능들이 완성되고 앱으로서의 모습을 더해가면서 점점 기대감과 조바심이 커져간다. 끝까지 잘 마무리할 수 있으면 좋겠다.

0개의 댓글