[React Native] 폰트 설치 및 적용

폰트 설치는 아래 페이지를 따라 했다.

적용에서 헤맸지만.. 설치는 어렵지 않다.

폰트 적용은 아래로!

 

mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4

Ultimate guide to use custom fonts in react native

나는 안드로이드 앱 전용이라 ios 부분은 하지 않았다.

assets/fonts 폴더에 otf 폰트를 넣고 (ttf 도 상관없는 듯)

 

react-native.config.js

파일을 만들고

module.exports = {
  project: {
//    ios: {}, -> 나는 상관 x
    android: {},
  },
  assets: ["./assets/fonts/"], 
};

위 코드를 작성했다.

 

$ npx react-native link

또는

$ react-native link

terminal 에 적는다.

 

일단 폰트 설치 끝!

---

폰트 적용!!!!

엄청 헤맸다 ㅠㅠ

전역 폰트를 설정하고 싶었는데...

www.npmjs.com/package/react-native-global-props

react-native-global-props

위 라이브러리를 설치해서 따라해봤는데.. 안 됨..

구글링해서 나오는 여러가지 방법을 다 해봐도 할 수 없었다..

 

그래서 그냥 리액트 네이티브 공식문서에 나와있는 폰트 적용법을 하기로 결정..

reactnative.dev/docs/text

Text · React Native

 

위 사이트를 보면

<View>
  <MyAppText>
    Text styled with the default font for the entire application
  </MyAppText>
  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

이런 식으로 쓴당

 

 

/src/components/common/AppText.js

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Text} from 'react-native';

const AppText = props => {
  return (
    <Text
      {...props}
      style={{
        ...props.style,
        fontFamily: 'NotoSansCJKkr-Regular',
      }}>
      {props.children}
    </Text>
  );
};

export default AppText;

 

위 코드를 작성하고,

 

/src/components/common/Page1.js

import {StyleSheet} from 'react-native';
import React from 'react';
import AppText from './AppText';

const Page1 = () => {
  return (
	<AppText style={styles.fontColor}>{title}</AppText>
  );
};

const styles = StyleSheet.create({
  fontColor: {
    fontSize: 20,
    color: 'black',
  },
});

export default Page1;

원하는 페이지, 컴포넌트, 컨테이너 등에서 AppText를 import 하여 사용하면 된다.

 

style로 따로 fontFamily 줄 필요없이 import 만 하면 되니 매우 편함!!