react-navigation사용하기

 react-navigation

안드로이드에서는 주로 Intent를 통해서 페이지를 이동하면서 다녔습니다. 

리액트 네이티브에서는 리액트와 달리 Router가 아닌 react-navigation을 사용하여야 합니다. 

하지만 이게 좀 사용하기에 까다롭다고 하는 사람이 많아서 다양한 회사에서 오픈소스로 만들었습니다. 

1. facebook 
https://reactnavigation.org/docs/en/getting-started.html

2. Wix 
https://wix.github.io/react-native-navigation/#/

몇개가 더 있긴 하지만 대표적인 두개를 소개했다. 이글에서는 facebook에서 만든 react-navigation을 사용하겠습니다. 

App.js 

App.js에서 기본적으로 있던 코드를 지워주고 아래와 같은 코드를 적어줍니다. 

createStackNavigator는 페이지를 Stack에 쌓아두어 이동하는 방법입니다. 이것은 이전의 페이지를 그대로 유지할 수 있는 장점이 있지만 페이지를 이동할때 reloading을 시키지는 못합니다. stack에 남겨놓고 싶지 않다면 createSwitchNavigator, bottomnavigation을 쓴다면 createBottomNavigator를 사용하면됩니다. 

그래서 createStackNavigator에 json형식으로 페이지를 하나하나 등록해줍니다. 

뒤에 json형식으로 옵션을 설정해줄 수 있습니다.

저는 간단하게

initialRouteName

시작페이지를 지정하는 것입니다. 

headerMode 
iphone X부터 해치형이 되어서 이에 맞추어 주는 것입니다. 그 후 createAppContainer에 등록해주면 됩니다. 

다른 옵션들은 아래의 사이트를 참고해주세요 

https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig

export default로 반환해주거나 class 혹은 함수에서 반환해주면 됩니다. 

first Page 

이전 App에서 createStackNavigation에 등록한 페이지는 자동적으로 props로 navigation을 받아올 수 있습니다. navigation객체에 있는 navigate에 App.js에 등록했던 키값을 통해서 페이지를 이동할 수 있습니다. 여기서는 버튼 클릭을 통해 지정된 페이지로 이동할 수 있습니다. 

그리고 참고로 navigate를 통해 데이터를 전달 해줄  수 있습니다. 

받는 쪽에서는 위에 상황에 맞추어

navigation.getParam("hi");로 받을 수 있습니다. 

SecondPage

secondPage에서는 이전페이지로 돌아갈 수 있게 goBack함수를 사용했습니다. 그리고 아까 위에서 보내주었던 hi데이터를 navigation.getparam("hi")를 통해서 받아올 수 있습니다.