Thêm Font chữ tuỳ chỉnh trong React Native 60+

I Text Font

Khi phát triển ứng dụng, đôi lúc chúng ta muốn sử dụng Font của riêng mình cho project. Vậy cài đặt và sử dụng chúng như thế nào? - Cùng tìm hiểu nhé.

Bước 1:

Tạo thư mục chứa font trong project và copy các font bạn muốn sử dụng vào đó.
Ví dụ: ở đây folder của mình là App/Assets/Fonts

Bước 2:

Khai báo folder chứa font
Tạo file react-native.config.js với nội dung:

./App/Assets/Fonts/ là đường dẫn đến thư mục chứa font mà chúng ta tạo ở Bước 1.

Bước 3:

Sử dụng react-native link để import thư mục assets vào android và ios

Bước 4:

Giờ chúng ta có thể sử dụng font style trong project của mình rồi đó:
style={{ fontFamily: "name of font" }}

II Icon Font

Phức tạp hơn một chút, có bao giờ các bạn muốn tạo bộ icon font giống như fontawesome để sử dụng trong project của mình chưa?

Bước 1:

Chuẩn bị icon dạng svg, đây là các icon của mình

Bước 2:

Vào đây để tạo icon font của bạn

Chọn New Empty Set để tạo icon set.
Sau đó chọn import to set để tạo icon

Chọn select all và chuyển sang tab generate font

Click download để tải font về

Chúng ta sẽ có được folder font

Bước 3:

để import vào project chúng ta cũng tạo folder chứa font và react-native.config.js tương tự như với Text font
sau đó coppy myicon.ttf vào App/Assets/Fonts
và selection.json vào App/Assets

Bước 4:

cài đặt react-native-vector-icons với lệnh npm install react-native-vector-icons

Bước 5:

Tạo component để sử dụng trong project

Bước 6:

Vậy chúng ta có thể sử dụng icon font dưới dạng component rồi
<MyIcon name={'chevron-left'} color={Colors.orange03} fontSize={22} />
với danh sách icon xem ở demo.html (trong folder vừa download về đó ^^)