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

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

6. [Stack] 여러 화면에 공통 Style 적용 여러 화면에 공통으로 Style을 적용하기 위해서는 Stack Navigator에 스타일을 지정해주면 된다. 여기서 프로퍼티 이름이 달라지는데 options가 아니라 screenOptions라는 이름으로 프로퍼티를 주면 된다. 그리고 모든 화면에 공통으로 스타일을 적용하고 단 하나의 화면만 스타일을 다르게 주고 싶으면 기존의 해당 화면의 Stack Screen에서 options 프로퍼티를 주면 된다. App.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} ..

5. [Stack] Header Bar 설정 헤더바의 이름이나 색상 등을 바꿀 수 있는 방법에 대해 알아보자. App.js에서 정의된 스크린에 options라는 프로퍼티를 주고 title이라는 값을 주면 헤더바의 글자를 바꿀 수 있다. 이렇게 하면 초기값으로 헤더 타이틀을 지정할 수 있지만, 그 후에도 임의로 조정 가능하다. 아래 코드처럼 this.props.navigation.setOptions를 통해 헤더바의 설정을 바꿀 수 있다. 글자 뿐 아니라 글자색과 배경색을 바꿀 수도 있다. { this.props.navigation.setOptions({ title: 'Changed!!!', headerStyle: { backgroundColor: 'pink', }, headerTintColor: 'red'..

2022.01.11 - [React Native/Basic] - [React Native] React Native Component - 1. Intro 2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 2. View, Text 2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 3. Style 2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 4. TouchEvent 2022.01.12 - [React Native/Basic] - [React Nativ..