Hướng dẫn tuỳ chỉnh bộ Icons trong React Native.

Bộ icons là đối tượng không thể thiếu trong lập trình di động. Nó giúp cho ứng dụng của chúng ta nhìn sinh động, đẹp mắt hơn. Tuy nhiên không vì thế mà chúng ta sử dụng chúng một cách vô tội vạ, để đạt được hiệu quả nhất thì chúng ta nên chọn 1 bộ hoàn chỉnh, không lẫn tạp nhiều fonts với nhau. Hôm nay mình sẽ hướng dẫn các bạn cách tuỷ chỉnh 1 bộ icons trong React Native.

Github: https://github.com/Dung1128/CustomIcomoom.git

Module cần trong bài này đó là react-native-vector-icons

Bước 1: Cài và link thư viện

yarn add react-native-vector-icons
or
npm install react-native-vector-icons –-save
and
react-native link

Bước 2: Vào trang chủ icomoon tạo bộ fonts cho riêng mình.

Screen Shot 2018-10-31 at 10.05.07 AM.png

Ở đây, bạn có thể chọn các icons mà ứng dụng của mình cần. Mục tiêu là chúng ta tạo ra 1 bộ fonts đầy đủ và đồng nhất cho ứng dụng. Sau khi chọn xong, các bạn click tạo và tải bộ fonts về máy.

Screen Shot 2018-10-31 at 10.06.57 AM.png

Tuy nhiên, nếu bạn có 1 bộ ảnh icons dạng png cũng có thể tạo bộ fonts với ảnh đó bằng cách import bộ ảnh lên website rồi tải về fonts.

Sau khi tải về ta sẽ được folder icomoom như sau:

Screen Shot 2018-10-31 at 10.08.03 AM.png

File selection.json chính là bộ icon dạng svg của chúng ta đã tải về.

File demo.html chính là file demo của bộ icon, chúng ta sẽ lấy tên icon trong file demo này.

Ví dụ: home, home2, office …

Screen Shot 2018-10-31 at 10.08.24 AM.png

Bước 3: Tạo folder assets/fonts kéo file fonts icomoon.ttf vào, cùng theo đó, copy luôn file selection.json vào folder assets.

Screen Shot 2018-10-31 at 10.48.45 AM.png

Bước 4: Link lại fonts

Đối với ios: Từ build phases, kéo fonts icomoom.tff như hình

Screen Shot 2018-10-31 at 10.50.22 AM.png

Ở file info.split khai báo tên fonts

Screen Shot 2018-10-31 at 10.54.43 AM.png

Đối với android: Link fonts vào trong folder android/src/main/assets/fonts

Screen Shot 2018-10-31 at 10.56.33 AM

Bước 5: Thêm đoạn mã fonts vào file package.json

“rnpm”: {
   “assets”: [
      “./src/assets/fonts”
   ]
},

Bước 6: Show icons, các bạn tham khảo đoạn code của mình. Mình tạo 1 component để hiện icons theo react-native-vector-icons

Code tham khảo:

Icons sẽ bao gồm các props như name (tên) color (màu sắc) size( kích thước).

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { PixelRatio } from 'react-native';
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import fontelloConfig from '../../assets/selection.json';
const Icon = createIconSetFromIcoMoon(fontelloConfig);

export default class extends PureComponent {
  static propTypes = {
    name: PropTypes.string.isRequired,
    size: PropTypes.number,
    color: PropTypes.string
  };

  static defaultProps = {
    size: PixelRatio.getFontScale() * 35
  };

  renderIcon() {
    return <Icon {...this.props} />;
  }

  render() {
    return this.renderIcon();
  }
}

Khi nào cần gọi Icons các bạn có thể xem file demo.html như ở trên để tìm tên và icon phù hợp.

Screen Shot 2018-10-31 at 3.43.28 PM.png

Kết quả:

Simulator Screen Shot - iPhone 6 - 2018-10-31 at 15.43.57.png

Chúc các bạn thành công!

Nguồn: https://www.reactnative.guide/

https://ntdung1128.wordpress.com/2018/10/31/huong-dan-tuy-chinh-bo-icons-trong-react-native/​

 

Bài liên quan

Hướng dẫn tuỳ chỉnh bộ Icons trong React Native.

Bộ icons là đối tượng không thể thiếu trong lập trình di động. Nó giúp cho ứng dụng của chúng ta nhìn sinh động, đẹp mắt hơn. Tuy nhiên không vì thế mà chúng ta sử dụng chúng một cách vô tội vạ, để đạt được hiệu quả nhất thì chúng ta nên chọn 1 bộ hoàn chỉnh, không lẫn tạp nhiều fonts với nhau. Hôm ...

Nguyễn Dũng viết 21:37 ngày 31/10/2018

Hướng dẫn tạo ứng dụng chat trong React kết hợp với Firebase - Phần 2

Xin chào các bạn, bây giờ tiếp tục với bài viết ở phần 1, hôm nay mình sẽ tiếp tục với phần 2, để xử lí các sự kiện khi người dùng nhập message vào, lưu message cũng như tên user vào firebase. Ở phần trước mình chỉ làm phần thô khi cho hiển thị message cũng như user ra, giao diện ở phần 1 sẽ như ...

Bùi Văn Nam viết 15:43 ngày 12/08/2018

Hướng dẫn tạo ứng dụng chat trong React kết hợp với Firebase - Phần 1

Như các bạn đã biết, hiện nay trên các mạng xã hội hay bất cứ đâu thì ứng dụng chat là điều không thể thiếu, bất cứ ngôn ngữ nào cũng đều có thể viết ra được một ứng dụng chat đơn giản, nhưng hôm nay mình xin hướng dẫn viết bằng React. Do mới học React đang còn non kém nên có gì sai sót mong mọi ...

Bùi Văn Nam viết 15:35 ngày 12/08/2018

Hướng dẫn hoàn chỉnh cho Android Testing

1. Tại sao kiểm thử Android? Android là hệ điều hành lớn nhất thế giới. Đồng thời Android cũng là hệ điều hành phân mảnh. Có hàng tá các thiết bị và các phiên bản Android mà ứng dụng của bạn cần phải tương thích với chúng. Nó không quan trọng việc bạn đầu tư bao nhiêu thời gian vào thiết ...

Tạ Quốc Bảo viết 13:42 ngày 12/08/2018

Hướng dẫn setup môi trường chạy rails + react để chạy jsx và ES6

Ở bài viết này mình xin chia sẻ việc setup môi trường để chạy rails với react khi các bạn viết jsx và es6. Khi mới làm quen với react, mình rất khó khăn và mất thời gian cho việc setup này. Hy vọng bài viết sẽ giúp các bạn mới tìm hiểu react có thể dễ dàng setup. Các bạn có thể tham khảo src ...

Bùi Văn Nam viết 13:34 ngày 12/08/2018

Nguyễn Dũng

4 chủ đề

9 bài viết

+2