[ReactNative]스타일 관리(Style)

01 개요

리액트 네이티브의 스타일에 관한 내용 전반을 다룬다.

최종수정일 : 2023.09.22

---

02 스타일 관리 방법

02.01 inline-style

<Text style={{color:'#000'}}>My Text</Text>

02.02 stylesheet

import { StyleSheet } from 'react-native';
const LotsOfStyles = () => {
 return (
   <View style={styles.container}>
     <Text style={styles.red}>just red</Text>
     <Text style={styles.bigBlue}>just bigBlue</Text>
     <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
     <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
   </View>
 );
};

const styles = StyleSheet.create({
 container: {
   marginTop: 50,
 },
 bigBlue: {
   color: 'blue',
   fontWeight: 'bold',
   fontSize: 30,
 },
 red: {
   color: 'red',
 },
});

02.03 styled component

import styled from 'styled-components'

const Button = styled.button``

---

03 세부사항

03.01 Font 설정

참조링크 : https://dev-yakuza.posstree.com/ko/react-native/react-native-custom-font/

03.01.01 Android

android/app/src/main/assets/fonts에 폰트 파일을 추가한다.

03.01.02 iOS

ios/Fonts에 폰트 파일을 추가한다.

xcode > project명 우클릭 > Add Files to "project_name"... > ios/Fonts 선택 > Create folder references를 선택 > Add

왼쪽 상단 프로젝트명을 선택 > TARGETS 프로젝트명을 선택 >상단 메뉴에서 Info 선택 > Info.plist의 내용을 확인 > Info.plist에 Fonts provided by application 추가 > 폰트 파일을 추가