13. [Tab] Style 설정 stack navigator, drawer navigator와 유사한데 tab navigator도 drawer navigator와 마찬가지로 각 Screen 컴포넌트에 개별 스타일링은 하지 않는다. 모두 공통적인 스타일을 갖게 되는 ui이기 때문에 navigator 태그 안에 스타일링을 준다. 각 탭에 그림을 삽입함과 동시에 선택되어진 탭의 크기를 좀 더 크게 키워주도록 해보자. 그럼 어떤 탭이 선택되었는지 알아야 하기 때문에 route를 파라미터로 넘겨준다. 원래는 tabBarOptions로 스타일을 정의했지만 이게 deprecated 되고 ScreenOptions를 사용하는 것으로 권장된다. 사실 tabBarOptions 안에 썼던 프로퍼티들 앞에 tabBar를 붙이..

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..

11. [Drawer] Custom Component side drawer를 customize 하는 방법에 대해서 알아보자! CustomDrawerContent를 대체하는 SideDrawer를 만들어보자 sideDrawer를 만든 뒤에 스타일까지 지정하면 스크린 간 이동을 하도록 설정을 추가로 해줘야 한다. 이건 onPress를 해서 이동하는 함수를 사용해주면 된다. 이동하는 함수는 새로 만들어 준다. navigateToScreen = (route) => () => { this.props.navigation.dispatch( CommonActions.navigate({ name: route, params: {}, }), ); }; route 는 화면 이동을 위해서 파라미터로 받아온 것인데 여기서 arro..

10. [Drawer] Style 설정 side drawer의 스타일을 설정하는 방법에 대해 알아보자! Stack Screen을 다룰 때는 각 스크린별로 스타일을 주기 위해서 Stack.Screen 태그 안에 options라는 프로퍼티를 사용했었고 여러 스크린에 공통으로 적용되는 스타일의 경우 Stack.Navigator 태그 안에 ScreenOptions라는 프로퍼티를 사용했다. Drawer Navigator의 경우는 side drawer를 정의된 모든 스크린에서 열 수 있다. 즉, 공통으로 사용되는 부분이기 때문에 스타일도 공통으로 적용될 거고 Drawer.Navigator 태그 안에 스타일을 설정한다. drawerType: 'front' - 뒤에 있는 화면은 고정된 채 side drawer가 화면을..

9. [Drawer] 설치 및 화면 Linking 수많은 에러를 맞이했지만 이를 해결한 과정은 이전의 error/solution 4번에 정리해뒀다. 2022.01.05 - [React Native/Basic] - [React Native] error/solution home_drawer.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} from 'react'; import {StyleSheet, Text, View, Button} from 'react-native'; class DrawerHomeScreen e..

8. [Stack] Header Bar에 버튼 추가 헤더바에 버튼을 추가하는 방법을 알아보자. 기존의 App.js 에서 Button을 import 한 뒤에 Home Screen의 options에서 headerRight 프로퍼티를 추가한다. jsx을 추가할 거라서 () => 를 사용한다. 새로운 버튼을 추가해 준다. +) 이전의 headerTitle도 같은 원리로 jsx라서 ()=> 를 사용해야만 동작한 것으로 보인다. , headerRight: () => ( alert('I am a button!!')} color="orange" /> ), }} /> 위에는 Home 스크린에서 버튼을 추가한 것이고, User 스크린에도 버튼을 추가해보자. 이번에는 Home 스크린으로 이동하는 버튼을 추가한다. 여기도 s..