[React Native Expo] 커스텀 폰트 적용하기 & 전역폰트 설정

npm install expo-font

 

일단 설치

import * as Font from 'expo-font';

const Layout = () => {
  const [fontsLoaded, setfontsLoaded] = useState(false);
  async function getFont() {
    await Font.loadAsync({
      hanSans: require("@/assets/fonts/SpoqaHanSansNeo-Regular.otf"),
      hanSansBold: require("@/assets/fonts/SpoqaHanSansNeo-Bold.otf"),
    });
    setfontsLoaded(true);
  }
  return(
    <Text style={ {fontFamily : 'hanSans'} }>
        텍스트
    </Text>
    )
}

요렇게 갖다 쓸 수 있는데 그럼 이제 궁금할것이다

엥 폰트 저렇게.. 텍스트컴포넌트에 매번 style지정을 해줘야되는건가..?

전역 폰트 설정은.. 못하나?

 

ㅇㅇ 라이브러리 설치하면됨

npm i react-native-global-props --save
npm install --save-dev @types/react-native-global-props

설치 설치

import { setCustomText } from "react-native-global-props";


const customTextProps = {
    style: {
      fontFamily: "hanSans",
    },
};
setCustomText(customTextProps);

그리고 위 내용에서 요 코드만 추가해주면

전역 폰트가 설정이된다.