style

헤더 타이틀 커스터마이징 react-navigation에서는 타이틀 영역을 헤더(Header)라고 부른다. 헤더 부분의 타이틀을 커스터마이징할 땐 두 가지 방법이 있는데, 첫 번째 방법은 Stack.Screen의 options 속성으로 설정하는 것이다. 두 번째 방법은 화면 컴포넌트에서 navigation.setOptions 함수를 사용하는 것이다. 아래 예제는 useEffect Hook 함수를 사용하였다. function HomeScreen({navigation}) { useEffect(() => { navigation.setOptions({title: '홈'}); }, [navigation]); return ( ... ); } 만약 컴포넌트에 라우트 파라미터값을 넣어야 한다면 아래와 같이 함수로 설정..

React Navigation 설치 및 사용법 React Navigation이란? 모바일 애플리케이션은 보통 여러 화면으로 구성되어 있는데 이러한 애플리케이션을 만들려면 내비게이션 관련 서드 파티 라이브러리를 사용해야 한다. 내비게이션과 관련해 devbksheen.tistory.com 이전 블로그 글에서는 React Navigtion을 소개하고 설치 후 사용해보았다. 이번 글에는 React Navigation을 더욱 활용하는 법을 알아보자. 라우트 파라미터 새로운 화면을 보며줄 때 의존해야 하는 어떤 값이 있으면 라우트 파라미터를 설정해야 한다. 예를 들어 회원 고유번호가 1인 데이터를 보여주는 화면이 있을때 {"id": 1}과 같은 방식으로 파라미터를 설정한다. 라우트 파라미터를 설정해 화면을 전환할 ..

컴포넌트에 StyleSheet를 사용해 스타일을 적용할 수 있다. 리액트 네이티브에서는 별도의 css 파일에 스타일을 작성하지 않고, 자바스크립트 파일 안에서 StyleSheet라는 것을 사용한다. import React from 'react'; import {Text, View, StyleSheet} from 'react-native'; function Hello(props) { return ( Hello World ); } Hello.defaultProps = { size: 'medium', // 기본 사이즈 }; const styles = StyleSheet.create({ container: { backgroundColor: 'black', borderWidth: 4, borderColor: 'b..