THÊM FONT FAMILY VÀO ỨNG DỤNG REACT NATIVE
Sau đây TíT sẽ hướng dẫn cách thêm 1 font family tải từ google font để app vào ứng dụng của mình nha. React Native TíT sử dụng là version 0.63.4 😆 .
Đầu tiên, các bạn vào trang https://fonts.google.com/ để chọn 1 font bất kì phù hợp cho project nha. Ở ví dụ này TíT dùng font "Lora", https://fonts.google.com/specimen/Lora#standard-styles. Sau đó down load font này về máy mn nha💥.
Sau khi giải nén ra sẽ có folder như này nè👇👇👇
Tiếp đó, copy hết file đuôi .ttf trong folder static vào folder fonts được tạo với đường dẫn như sau src/assets/fonts như này:
Tiếp theo, tạo file react-native.config.js cùng cấp với file index.js nha, file này có nội dung là map tới đường dẫn fontfamily
module.exports = {
assets: ['react-native-vector-icons', './src/assets/fonts'],
};
Do TíT dùng version 0.63.4 nên sẽ có file config.js như thế. Nếu mn dùng version nhỏ hơn 60 thì thêm cái này trong file package.json nha👇👇
"rnpm": {
"assets": ["./src/assets/fonts"]
},
Xong rồi thì chạy "npx react-native link" nha. Khi đó link font vào cả android và ios. Để kiểm tra, mn có thể check trong Info.plist (Ios) và android/app/src/main/assets/fonts (android) để kiểm tra nha.
Vậy là setup đã xong. Muốn dùng font thì đơn giản thui. Mn có thể tạo 2 biến như này để dùng chung cho dễ nha
fontFamily: 'Lora-Regular',
fontFamilyBold: 'Lora-Bold',
Đó muốn dùng ở đâu thì mn import vô là dùng thui. Cảm ơn mn đã đọc và ủng hộ TíT nha. Hy vọng bài viết này sẽ giúp đỡ được mọi người khi custom mới 1 font. Nếu có vẫn đề gì thì contact qua facebook hoặc gmail cho TíT nha💕💕💕