BÀI 23 - CUSTOM FONTS TRONG REACT NATIVE

  • Đầu tiên, chạy thư viện này: expo install expo-app-loading

  • Sau đó, tải các fonts cần dùng (đuôi là .ttf), mình hay tải trên fonts.google.com . Sau đó, ném chúng vào ./assets/{fonts}

  • Cuối cùng là code cho nó khởi động các fonts đã add, để sử dụng: fontfamily: 'name-fonts',

import React, { useState } from 'react';

import * as Font from 'expo-font';

import AppLoading from 'expo-app-loading';


const getFonts = () => Font.loadAsync({

'OleoScriptSwashCaps-Bold' : require('./assets/fonts/OleoScriptSwashCaps-Bold.ttf'),

'OleoScriptSwashCaps-Regular' : require('./assets/fonts/OleoScriptSwashCaps-Regular.ttf')

});


function App() {


const [fontsLoaded, setFontsLoaded] = useState(false);


if (fontsLoaded) {

return (

<Home />

);

}

else {

return(

<AppLoading

startAsync={getFonts}

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

onError={console.warn}

/>

)

}

};


export default App;

  • Nếu gặp lỗi, thì cứ dùng cách truyền thống: crtl+C then--->: npm start