본문 바로가기
소프트웨어 마에스트로/FrontEnd

[React Native] expo font 적용기

by alpakaka 2024. 11. 13.

https://docs.expo.dev/develop/user-interface/fonts/

 

Fonts

Learn how to integrate custom fonts in your app using local files or Google Font packages

docs.expo.dev

 

여기 참고해서 바꿨다.

npx expo install expo-font

 

다운로드 받는다.

 

 

넣는다.

 

const BOLD = 'Pretendard-Bold';
const MEDIUM = 'Pretendard-Medium';
const REGULAR = 'Pretendard-Regular';

const fontStyles = {
  letterSpacing: 0,
  Heading: {
    H1: {
      B_130: {
        fontFamily: BOLD,
        fontSize: 28,
        lineHeight: Math.round(28 * 1.3),
      },
      B_100: {
        fontFamily: BOLD,
        fontSize: 28,
        lineHeight: 28,
      },

 

이런식으로 넣고 Import 해서 불러왔더니 잘 해결되었다! 굳굳

 

그 다음으로 할 것은 이제 디자인을 넣을 준비 준비를 마쳤기 때문에 이제 디자인을 넣어볼거다.

 

할일 2

캘린더 컴포넌트에 디자인 붙이기

완성!

 

두번째로 할 일 

confirm UI 변경

이건 사실 디자인 붙이는 게 어렵다기보다는....

컴포넌트를 다양하게 썼는데, 섬세하게 수정하지 못해서 힘들었다.

디자인을 넣어주긴헀는데, 아쉬운점은 버튼이 좀 ... 폰트가 커스텀이 좀 어려웠다. 

그래서 Layout 으로 만들까 했는데, 프론트짱님이 바꿀 수 있는지 확인해주신다고 해서 기다리고 있다.

일단 여기서 마치는 걸로 해보려고 한다.

 

3. loading component 제작

로딩 컴포넌트 만들어야한다.

그래서 만들었다.

앗 잘 안보이지만.. 여튼 넣었다.

UI Kitten 에서 사용한 걸 넣었는데.. 흠.. 고민중이다. 

react 는 예쁜 거 많던데, RN은 마음에 드는게 사실상 없었다.

색상 변경도 쉽지 않고.. 

 

이제 보고서 작성해야지...