React-Navigation 적응기 1

React를 이용하여 웹 페이지를 만들 때는 react-router 를 사용하면 되지만,

React-Native 로 모바일 어플을 만들 때는 화면전환을 위해

navigation 을 사용해야 한다. 

 

네비게이션 선택지는

react-navigation

react-native-navigation

native-navigation

react-native-router-flux
react-router

이렇게 다양한데,

나는 이번 프로젝트에서 react-navigation 을 사용했다. 

 

크게 고려하지 않고, 시작이 쉬워서 택한 것인데 프로젝트를 마무리할 쯤에

아래 링크를 통해 react-navigation 이 갖고 있는 문제점들도 확인할 수 있었다.

https://medium.com/@kyo504/react-navigation-%EC%93%B0%EC%8B%A4-%EA%B1%B4%EA%B0%80%EC%9A%94-8c7b0e8997f8

 

아래 링크를 통해서는 react-native-navigation 이 더 나았겠다는 생각도 하게 되었고 ㅎㅎ

https://jsdev.kr/t/react-native-1-navigation/2617

---

내가 사용한 네비게이션은 총 4가지 종류이다.  (정확한 명칭은 버전에 따라 다를 수도 있음)

1. stack navigator

2. tab navigator

3. drawer navigator

4. switch navigator

이 네 가지 네비게이터들을 잘 조합해서 사용하고,

최상단의 네비게이터를 createAppContainer 에 넣어서 사용하면 된다. 

 

---

 1. Stack Navigator 

스택 네비게이션은 우리가 잘 아는 stack의 구조로 스크린을 쌓아나간다.  
위의 그림과 같이 원래 있는 A 스크린에서  B스크린으로 넘어갈 때 스택이 쌓이고, 
다시 A로 돌아갈 때는 아래 그림처럼 B 스크린을 빼서, A스크린으로 돌아가게 된다. 
스택 네비게이션에서는 그래서 뒤로가기 버튼을 따로 만들지 않아도 기본적으로 제공이 되었다. (편하다!)

 

2. Drawer Navigator

3. Tab Navigator

 

탭과 드로워는 위의 그림처럼

하단바(상단바도 물론 가능)와 사이드바 등을 이용해서 스크린을 전환하고 싶을 때 사용한다.  

navigationOptions 나 tapbarOptions 등을 통해 이들의 디자인을 바꿀 수 있음!

 

 

4. Switch Navigator

 

switch는 말 그대로 화면을 바꾸는 것!

 
스택은 스택 위에 스크린들이 쌓이는 느낌이라면, 

스위치는 말 그대로 그 위에 쌓이는 것이 아니라 아예 그 스택을 벗어나서 다른 곳으로 이동하는 것 
따라서 뒤로 가기 같은 기능을 제공하지는 않는다. 물론 따로 이동은 가능하지만. 

switch는 주로 로그인화면 등을 구현할 때 사용하게 된다.  
보통 로그인을 해서 메인 페이지에 진입하면, 

로그아웃하지 않고 어플을 사용하고 있는 동안에는 로그인 이전으로 돌아갈 일이 없기 때문!

 

---

아주 간단한 사용법

 

// 스크린 전환
// createNabigator에 등록된 스크린은 this.props로 navigation을 사용 할 수 있다. 
this.props.navigation.navigate('Bscreen');  

// 어떤 parameter 를 전달하고 싶을 때, 스크린 뒤에 객체 형식으로 넣어 전달할 수 있다. 
this.props.navigation.navigate('mainpage', {'name' : 'tube'})


//찾아 쓰고 싶을 때 
this.props.navigation.getParam('name')
//아니면, params 에서 찾아도 된다. 
this.props.navigation.state.params.name

 

 

---

react-navigation 적응기 2

https://soyoonty.tistory.com/143

react-navigation 적응기 2