Tab Navigator(2)
-
[React Native] React Navigation - 13. [Tab] Style 설정
13. [Tab] Style 설정 stack navigator, drawer navigator와 유사한데 tab navigator도 drawer navigator와 마찬가지로 각 Screen 컴포넌트에 개별 스타일링은 하지 않는다. 모두 공통적인 스타일을 갖게 되는 ui이기 때문에 navigator 태그 안에 스타일링을 준다. 각 탭에 그림을 삽입함과 동시에 선택되어진 탭의 크기를 좀 더 크게 키워주도록 해보자. 그럼 어떤 탭이 선택되었는지 알아야 하기 때문에 route를 파라미터로 넘겨준다. 원래는 tabBarOptions로 스타일을 정의했지만 이게 deprecated 되고 ScreenOptions를 사용하는 것으로 권장된다. 사실 tabBarOptions 안에 썼던 프로퍼티들 앞에 tabBar를 붙이..
2022.01.19 -
[React Native] React Navigation - 12. [Tab] 설치 및 화면 Linking
12. [Tab] 설치 및 화면 Linking tab navigator는 화면 상단이나 하단에 탭을 생성해서 터치 시에 해당 스크린으로 이동하게 도와주는 navigator이다. https://reactnavigation.org/docs/tab-based-navigation https://reactnavigation.org/docs/tab-based-navigation/ reactnavigation.org 공식문서 보고 설치 따라서 하고 또다시 import 와 객체를 만들어 준 뒤에 사용! home_tab.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ i..
2022.01.19