Navigation

React Navigation library를 이용하여 탭과 스택 방식의 네비게이션을 구현할 예정입니다. 

 

아래 명령어를 통해 필요한 개별 모듈들을 설치합니다. 

 

npm install --save react-native-gesture-handler react-native-reanimated

npm install --save uuid react-navigation react-navigation-stack react-navigation-tabs

 

*react-native의 버전이 0.60 이하라면 react-native link react-native-gesture-handler 처럼 외부 모듈을 링크 해주는 작업을 추가

 

소스파일 구조

https://github.com/action-intent/ReactNative/tree/master/navigator

위 깃허브의 코드 구조를 참고해 주세요.

*프로젝트 생성시 추가되는 index.js는 navigator의 CitiesApp.js을 실행할 수 있도록 수정

 

앱의 전체 테마 색을 위한 theme.js 추가

primary color를 설정하여 색상 변경 시 쉽게 적용할 수 있도록 함

 

index.js 생성

*navigation을 위한 index.js임 프로젝트 생성시 만들어지는 index.js와 다름

createStackNavigator(라우트 설정 관련 인수, 스타일)

 navigationOptions : 화면 상단에 타이틀과 back 버튼

 

CitiesApp.js 생성

cities state : 이름, 나라, 장소배열, ID 속성을 가진 도시 정보 배열

addCity : 도시 정보를 추가 하기 위한 메서드

addLocation : 각 도시의 위치 정보를 추가하기 위한 도시 객체 내 위치 정보 배열

render : Tabs component를 리턴하고 도시 데이터 및 위 두 메서드를 props로 전달

 

components/CenterMessage.js 빈 화면 표시를 위한 stateless component 추가

 

AddCity.js 도시 추가를 위한 화면 추가

submit : 입력된 값이 비어있지 않으면 uuidV4를 이용해 ID를 할당, 빈 locations 배열 생성, addCity를 호출하여 추가된 city 정보 추가

navigate를 호출하여 추가된 Cities 탭으로 이동

 

도시 목록을 표시하는 Cities.js 추가

- CenterMessage를 가져와 빈 리스트 표시

- static navigationOption을 통해 title(rout)바 속성을 설정

- navigate method를 통해 도시 아이템 선택 시 도시 정보를 인자로 City라우트(navigation.state.params)

- render에서는 scrollView를 통해 도시 목록을 보여주고 TouchableWithoutFeedback을 통해 선택한 도시로 이동

 

각 도시의 주요 장소를 추가하고 출력하는 City.js 추가

- navigationOptions에서 route 객체 반환을 위해 콜백 함수 이용

- addLocation method는 navigation param에서 도시 정보를 가져오고 screenProps의 addLocation을 호출하여 location을 추가

- render에서 도시의 location정보를 scrollView를 통해 출력하고 location을 추가할 수 있는 폼을 추가

 

손가락이 저릴 정도로 코드를 추가 했다. 실행해보자. 동작은 잘 되지 않는다. 인터페이스만 확인하자

 

*실행 시 에뮬레이터에서 아래와 같은 메세지와 함께 실행이 되지 않는다면 아래 빌드 터미널을 종료하고 다시 실행해보자.

invariant violation: module rcteventemitter is not a registered callable module (calling receivetouches) callfunctionreturnflushedqueue [native code]:0

실행 결과 화면

*에뮬레이터에서 경고 창 무시하기 react-native run-ios --varient-release 로 실행하면 됨.

 

데이터 유지하기(AsyncStorage)

앱이 종료된 뒤에도 입력한 데이터를 유지할 수 있도록 캐쉬 모듈을 사용합니다.

 

npm install @react-native-community/async-storage

위 명령어를 통해 AsyncStorage 모듈을 설치합니다. AsyncStorage는 안드로이드의 SharedPreference와 비슷하다고 보시면 됩니다. 

 

*설치 후 아래와 같은 메세지와 함께 run-ios가 되지 않으면 프로젝트 내 ios폴더에서 pod install로 에뮬레이터에 모듈을 올려준다.

error Could not find the following native modules: RNCAsyncStorage. Did you forget to run "pod install" ?

 

CitiesApp.js

1. AsyncStorage를 import

2. 저장 key를 정의하고 componentDidMount 메서드에서 캐쉬된 데이터를 불러온다.

3. 데이터 갱신을 위해 addCity, addLocation 메서드에 JSON.stringify를 이용해 cities를 캐쉬 할 수 있도록 한다.

앱을 재실행 하여도 입력한 도시 정보가 유지된다.

 

이상으로 Navigation, Style적용 및 데이터 캐쉬를 위한 예제를 마무리 하였습니다. 

 

어렵더라도 예제 코드를 이해하고 넘어 갈 수 있도록 합니다. 

 

Tab navigation외 stack, drawer navigation이 있는데 찾아서 연습해 봅시다. 

https://reactnavigation.org/docs/en/next/drawer-based-navigation.html#docsNav