프로젝트 개발 초기에는 빌드한 앱을 구글 플레이스토어와 앱스토어 둘 다 배포할 계획이었지만, 검색해보니 앱스토어의 검수과정과 기간이 1달 동안의 결과물로는 맞추기 어렵다는 쪽으로 의견이 모아져 플레이스토어 출시에 목표를 집중하기로 했다.
안드로이드에 맞추려면 어떤 부분을 보완해야할까 찾아보니 가장 많이 나온 게 안드로이드 하단 버튼 탭이었다. 특히 하트웨어의 뒤로가기 버튼에도 똑같이 이벤트를 달아줘야 화면 내 뒤로가기처럼 작동한다.
react-native
의 BackHandler
컴포넌트가 이러한 이벤트 처리를 도와준다. 아래 (스타일 제외)코드가 예시이다.
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));
조금씩 기능들이 완성되고 앱으로서의 모습을 더해가면서 점점 기대감과 조바심이 커져간다. 끝까지 잘 마무리할 수 있으면 좋겠다.