[React Native] React Navigation

React Native doesn't have a built-in idea of a global history stack like a web browser does -- this is where React Navigation enters the story.
React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history.

React Navigation? 화면 이동을 위한 라이브러리 중 하나이다.

• react-native-router-flux
• react-navigation
• native-navigation
• react-native-navigation

첫 번째꺼는 이슈도 많고 업데이트가 제대로 안 되고 있는 것 같다. 거의 대부분의 블로그에서 react-navigation과 react-native-navigation을 두고 비교와 고민을 하고 있다.

 

화면 이동, Navigation 자체가 RN에서 굉장히 중요한 기능 중 하나.

글들을 찾아보니 React Native Navigation이 성능적으로 우세하다고 나오는데 내가 직접 성능을 지금 비교하고 싶진 않다. 

 

React Navigation은 다큐멘테이션이 참 잘 되어있고 이슈사항들을 인지하고 지속적인 업데이트가 이루어지고 있다. 페이스북에서 만들고 있다는 것도 신뢰가 더 간달까,,, 그래서 나는 이걸로 선택했다.

 

화면 전환하는 것까지 해봤다. 진행하며 읽고 참고할 만한 것들을 모았다.

Note: The component prop accepts component, not a render function. Don't pass an inline function (e.g. 
component={() => <HomeScreen />}), or your component will unmount and remount losing all state when the parent component re-renders. See Passing additional props for alternatives.

Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use React.memo or React.PureComponent for your screen components to avoid performance issues.

Summary
- navigation.navigate('RouteName') pushes a new route to the stack navigator if it's not already in the stack, otherwise it jumps to that screen.
- We can call navigation.push('RouteName') as many times as we like and it will continue pushing routes.
- The header bar will automatically show a back button, but you can programmatically go back by calling navigation.goBack(). On Android, the hardware back button just works as expected.
- You can go back to an existing screen in the stack with navigation.navigate('RouteName'), and you can go back to the first screen in the stack with navigation.popToTop().
- The navigation prop is available to all screen components (components defined as screens in route configuration and rendered by React Navigation as a route).

 

출처, 참고 블로그 링크

https://reactnavigation.org/docs/hello-react-navigation

https://reactnavigation.org/docs/hello-react-navigation/

https://bangc.tistory.com/13

[React-Native] 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 Navigation…쓰실 건가요?!

(이건 되게 옛날 글이지만 이런 시선이 좋아서.) 고려할만한 내용들이다.