RN Prj - Custom Font, Global Style

9일차는 'The Net Ninja' React Native 강좌에 있던 내용 중 

Custom Font, Global Styles 를 현 project에 적용 해보겠습니다

 

Expo URL 을 참고 해서 google font download 진행.

https://docs.expo.io/versions/latest/sdk/font/

Font - Expo Documentation

font url 들어가서 - Using Custom Fonts -  Google Fonts - Nunito search - 우측 상단에 Download family

 

 

다운 받은 파일을 assets/ 안에 /fonts 폴더 생성 후 복사 합니다.

 

 

expo-font 를 사용하기 위해 package install 을 하고

$ expo install expo-font

 

여러 파일 function 에서 접근하기 위해 [Fonts.js] 새로 생성.

다운 받은 파일을 아래와 같이 정확한 path 로 추가해줍니다.

loadAsync 는 font 를 loading 하기 위한 method 이므로 선언해줍니다.

import * as Font from 'expo-font';

export const Fonts = () => Font.loadAsync({
  NunitoRegular: require('./assets/fonts/Nunito-Regular.ttf'),
  NunitoBold: require('./assets/fonts/Nunito-Bold.ttf')
});

loadAsync method 이름에서 알 수 있듯이 비동기라

class 내의 render() 호출 이후, 그리고 function() 호출 이후에 load 되기 때문에

번거롭지만 AppLoading 조건문 방식을 활용 해야 합니다.

아니면, launch 가 되지 않습니다.

 

state Component 를 사용하여 font 가 load 됐으면 UI 구성을 하고

그렇지 않으면, AppLoading font sync 하고 완료되면 state 값을 true 로 set합니다.

그럼  fontLoad 되어 user 의도대로 UI 가 정상적으로 그려집니다.

import { AppLoading } from 'expo';

export default function() {

  const [fontLoad, setFontLoad] = useState(false);

  if (fontLoad) {

      return ();

    } else {

      return (

        <AppLoading

          startAsync = {Fonts}

          onFinish = {() => setFontLoad(true)}

        />

      );

    }
}

 

그리고, css 에 선언해주면 적용이 됩니다.

const styles = StyleSheet.create({
    title: {
      fontSize: 28,
      fontFamily: 'NunitoBold',
      marginHorizontal:16,
      marginTop:16,
    },
    checklist: {
      fontFamily: 'NunitoRegular',
      fontSize: 24,
      textAlign:'center',
    },
});

영상으로 참고하실 분은 https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=17

막상 적용하고 나니 output 에 비해 코드 정리가 생각보다 귀찮네요.

내장 font 를 사용하는 편이 나을 것 같은 느낌적인 느낌...

 

NunitoBold 를 적용하기 전과 적용 후의 차이는 영상을 참고하세요~

 

 

이번에는 GlobalStyles를 적용해보겠습니다.

별 다른건 아니고 css styleSheet 을 1개 file 로 집합시키는 구조인데

file 별 가독성도 높이고 file 당 code line 늘어날 것도 감안해서 활용하기로 했습니다.

 

[GlobalStyles.js] 파일을 새로 만들고 export const function 형태로 만듭니다.

import {StyleSheet} from 'react-native';

export const GlobalStyles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    safearea: {
        flex: 1,
    },
    item: {
        borderRadius:20,
        backgroundColor: '#EBDFC9',
        padding: 10,
        width:200,
        height:200,
        marginVertical: 32,
        marginHorizontal: 32,
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 28,
        fontFamily: 'NunitoBold',
        marginHorizontal:16,
        marginTop:16,
    },
    checklist: {
        fontFamily: 'NunitoRegular',
        fontSize: 24,
        textAlign:'center',
    },
});

그리고, 기존 GlobalStyles 를 가져다 쓸 js 파일에

import 를 추가해주고, 기존 Styles 를 GlobalStyles 로 모두 바꿉니다.

 

 

영상으로 참고하실 분은 https://www.youtube.com/watch?v=wtvpQ9liu4g&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=18