Chào các bạn, trong bài viết này mình sẽ chia sẻ cách thêm và config font chữ trong React Native CLI.
Bài viết này được mình viết qua kinh nghiệm thực tế cũng như tham khảo một số bài viết mình tìm trên google.
1. Tải và cài đặt font
Tải font
Ở trên mạng có rất nhiều loại font khác nhau, các bạn có thể tìm bộ font phù hợp với dự án của mình, có thể tham khảo trang web sau https://designervn.net/threads/101-font-ch-mi-n-phi-tuy-t-voi-nhat-danh-cho-designer.10064/
Ở đây mình tải về bộ font Mulish
Set up project
Đầu tiên chúng ta sẽ đưa toàn bộ file ttf vào một thư mục
- Tạo file react-native.config.js trong thư mục gốc của dự án sau đó thêm dòng code sau:
1 2 3 4 5 6 7 8 | module.exports = { project: { ios: {}, android: {}, }, assets: ['./src/assets/fonts/'] }; |
Chú ý: Phải ghi chính xác đường dẫn của bộ font vừa đưa vào dự án
- Chạy lệnh sau để cài đặt font chữ: react-native link và npm react-native-asset
Sau khi chạy lệnh trên, hãy kiểm tra lại trong thư mục android và ios có file link-assets-manifest.json thì tức là đã link thành công bộ font
2. Cách sử dụng font trong dự án
- Tạo file và đặt tên cho từng font rồi export.
1 2 3 4 5 6 7 8 9 10 11 | const Fonts = { regular: "Mulish-Regular", bold: "Mulish-Bold", italic: "Mulish-Italic", boldItlaic: "Mulish-BoldItalic", semiBold: "Mulish-SemiBold", }; export default Fonts; |
- import bộ font vừa setup trên vào Screen
1 2 3 4 5 6 7 8 9 10 11 | import {StyleSheet} from 'react-native'; import { Fonts } from '../../../core'; const styles = StyleSheet.create({ text: { fontFamily: Fonts.italic } }); |
3. Kết thúc và lời cảm ơn
Như vậy mình đã hướng dẫn các bạn cách cài và sử dụng font chữ trong React Native, hy vọng bài viết này sẽ giúp ích cho các bạn trong học tập cũng như công việc.
Nếu có thắc mắc gì về bài viết hay muốn mình ra về một chủ đề khác thì hãy comment bên dưới nhé.
Cảm ơn các bạn đã xem bài viết này, thấy hay thì giúp mình 1 upvote nhé.