React Native global font 설정

SangBooom·2020년 12월 24일
0

RN에서 전역적으로 동일한 글꼴을 사용하고싶다.

body {
  fontFmily: 'AntDesign';
}

모든 Text 노드에 수동으로 적용하는 것은 지나치게 비효율적이다.

내가 적용한 방법은 다음과 같다.

1. npm 라이브러리

react-native-global-props 라는 라이브러리를 추천한다.

사용방법은 간단하다.

root 디렉토리에 들어간다.

// App.js
import {
  setCustomText,
} from 'react-native-global-props';

폰트만 적용시길꺼니까 setCustomText만 불러온다.

// App.js
const customTextProps = {
  style: {
    fontFamily: 'AntDesign'
  }
};

Text 구성 요소에 대해 원하는 사용자 지정 스타일을 작성한다.

// App.js
setCustomText(customTextProps);

setCustomText함수를 호출하고 스타일을 함수에 전달한다.

그럼 적용된다.

2. defaultProps

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.style =  { fontFamily: 'AntDesign' }

버그가 있을 수 있는 코드니까 조심히 사용하자.

3. 공식문서

사실 제일 권장되는 방법이다. MyAppText와 같은 고유한 구성요소를 만드는 것이다.
범용 스타일을 사용하여 텍스트 구성요소를 렌더링한다.

limited-style-inheritance

profile
끊임없이 떨어지는 물방울이 바위를 뚫는다

0개의 댓글