Hướng dẫn sử dụng phông chữ tùy chỉnh trong React Native

React Native cung cấp một số kiểu phông chữ mặc định để chọn khi xây dựng ứng dụng của bạn. Tuy nhiên, để cung cấp cho ứng dụng của bạn tính độc đáo và cá tính, ứng dụng đó cần nổi bật trong một thị trường đông đúc, đôi khi bạn có thể cần sử dụng phông chữ tùy chỉnh.

Hãy tìm hiểu cách áp dụng phông chữ tùy chỉnh khi xây dựng dự án React Native tiếp theo của bạn.

Hiểu các định dạng tệp phông chữ

Với React Native, bạn có thể thêm các tệp phông chữ tùy chỉnh vào dự án và tùy chỉnh giao diện của các thành phần văn bản trong ứng dụng của mình. Các phông chữ tùy chỉnh này có trong các tệp phông chữ với các định dạng tệp khác nhau. Các tệp chứa thông tin kiểu dáng được mã hóa cho một kiểu chữ phông chữ cụ thể.

Các định dạng tệp phông chữ phổ biến nhất mà bạn sẽ sử dụng trong quá trình phát triển ứng dụng di động React Native là:

• Phông chữ TrueType (TTF): Đây là định dạng tệp phông chữ phổ biến mà hầu hết các hệ điều hành và ứng dụng đều hỗ trợ. Tệp TTF tương đối nhỏ và có thể chứa nhiều ký tự.
• Phông chữ OpenType (OTF): Tương tự như TTF nhưng cũng có thể chứa các tính năng đánh máy nâng cao. Tệp OTF lớn hơn tệp TTF và không phải ứng dụng nào cũng hỗ trợ chúng.
• Phông chữ OpenType được nhúng (EOT): Các tệp EOT được nén và có thể bao gồm thông tin quản lý quyền kỹ thuật số (DRM) để ngăn chặn việc sử dụng trái phép. Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ EOT và nó thường không được khuyến nghị sử dụng trong các dự án hiện đại.

Khi sử dụng phông chữ tùy chỉnh trong dự án, điều quan trọng là phải chọn định dạng tệp phông chữ đáp ứng nhu cầu của dự án. Điều này có thể liên quan đến các yếu tố như hỗ trợ nền tảng đích, kích thước tệp, yêu cầu cấp phép và hỗ trợ cho các tính năng đánh máy nâng cao.

Nhập và áp dụng tệp phông chữ trong React Native

Bạn có thể tải xuống tệp phông chữ từ bất kỳ đâu trên internet và nhập tệp đó vào dự án React Native cá nhân của bạn để sử dụng. Tuy nhiên, có rất nhiều trang web tốt, an toàn để tải xuống các phông chữ miễn phí một cách an toàn.

Để nhập tệp phông chữ vào dự án React Native của bạn, hãy tạo một nội dung/phông chữ ở thư mục gốc của dự án của bạn và di chuyển các tệp phông chữ vào đó.

Các bước cần thiết để sử dụng phông chữ tùy chỉnh sẽ khác nhau khi làm việc với dự án hoàn toàn do React Native tạo hoặc dự án React Native do Expo quản lý.

Phản ứng CLI bản địa

Nếu bạn đang làm việc với dự án do React Native CLI tạo, hãy tạo một Reac-igen.config.js tệp và xác định các cài đặt này bên trong nó:

 module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets: [ './assets/fonts/' ],
}
 

Cấu hình này yêu cầu dự án bao gồm các nội dung phông chữ được lưu trữ trong “./assets/fonts/” thư mục để ứng dụng có thể truy cập chúng khi hiển thị các phần tử văn bản.

Sau đó, bạn có thể liên kết các tài sản thư mục vào dự án của bạn bằng cách chạy như sau:

 npx react-native-asset
 

 npx react-native link
 

Giờ đây, bạn có thể sử dụng các phông chữ tùy chỉnh được liên kết như bình thường trong kiểu CSS của mình bằng cách gọi tên chính xác của chúng theo kiểu họ phông chữ:

 <Text style={styles.fontText}>Hello, World!</Text>
const styles = StyleSheet.create({
    fontText: {
      fontFamily: 'Tilt Prism',
      fontSize: 20,
    },
});
 

hội chợ triển lãm-CLI

Đối với các dự án do Expo tạo, bạn nên cài đặt thư viện phông chữ expo dưới dạng phần phụ thuộc để nhập và áp dụng phông chữ tùy chỉnh. Cài đặt nó bằng lệnh này:

 npx expo install expo-font
 

Bây giờ bạn có thể sử dụng expo-phông chữ trong tệp dự án của mình như sau:

 import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Font from 'expo-font';
const CustomText = (props) => {
  const [fontLoaded, setFontLoaded] = useState(false);
  useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      });
      setFontLoaded(true);
    }
    loadFont();
  }, []);
  if (!fontLoaded) {
    return <Text>Loading...</Text>;
  }
  return (
    <Text style={{ ...props.style, fontFamily: 'custom-font' }}>
      {props.children}
    </Text>
  );
};
const App = () => {
  return (
    <View style={styles.container}>
      <CustomText style={styles.text}>Hello, world!</CustomText>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});
export default App;
 

Bạn có thể cải tiến và cải thiện khối mã ở trên tốt hơn bằng cách áp dụng mẫu thiết kế thành phần trình bày và vùng chứa.

Đây là kết quả của cả ứng dụng React Native CLI và Expo CLI:

Đặt Phông chữ Tùy chỉnh làm Phông chữ Mặc định cho Ứng dụng Expo của bạn

Bạn có thể muốn sử dụng một phông chữ tùy chỉnh làm phông chữ mặc định cho toàn bộ ứng dụng React Native của mình thay vì áp dụng nó cho từng ứng dụng. Chữ thành phần riêng lẻ. Để làm điều này, bạn có thể sử dụng Chữ các thành phần mặc địnhProps để đặt họ phông chữ mặc định cho tất cả Chữ thành phần trong ứng dụng của bạn.

Sử dụng Text.defaultProps thuộc tính để thiết lập phông chữGia đình thuộc tính thành tên phông chữ tùy chỉnh của bạn.

Đây là một ví dụ:

 import React, { useEffect } from 'react';
import { Text } from 'react-native';
import * as Font from 'expo-font';
const App = () => {
  useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      });
      Text.defaultProps.style.fontFamily = 'custom-font';
    }
    loadFont();
  }, []);
  return (
    <Text>Hello, world!</Text>
  );
};
export default App;
 

Đặt họ phông chữ mặc định bằng cách sử dụng Text.defaultProps sẽ chỉ ảnh hưởng đến các thành phần Văn bản được tạo sau khi đặt mặc định. Nếu bạn đã tạo các thành phần Văn bản trước khi đặt họ phông chữ mặc định, bạn sẽ cần đặt phông chữGia đình thuộc tính riêng lẻ trên các thành phần đó.

Tạo một họ phông chữ tùy chỉnh với nhiều kiểu phông chữ

Để tạo một họ phông chữ tùy chỉnh với nhiều kiểu phông chữ trong ứng dụng do React Native CLI tạo, trước tiên bạn cần nhập các tệp phông chữ vào dự án của mình. Sau đó, tạo một đối tượng họ phông chữ tùy chỉnh ánh xạ trọng lượng và kiểu phông chữ tới các đường dẫn tệp phông chữ tương ứng của chúng.

Ví dụ:

 import { Text } from 'react-native';
import CustomFonts from '../config/Fonts';
const App = () => {
  const CustomFonts = {
    'CustomFont-Regular': require('../fonts/CustomFont-Regular.ttf'),
    'CustomFont-Bold': require('../fonts/CustomFont-Bold.ttf'),
    'CustomFont-Italic': require('../fonts/CustomFont-Italic.ttf'),
  };
  async componentDidMount() {
    await Font.loadAsync(CustomFonts);
  }
 return(
    <Text style={styles.text}>
      Hello, world!
    </Text>
  );
};
const styles = StyleSheet.create({
  text: {
    fontFamily: 'CustomFont-Regular',
    fontStyle: 'italic',
    fontWeight: 'bold',
    fontSize: 20,
  },
});
export default App;
 

Lưu ý rằng tên và đường dẫn tệp phông chữ trong ví dụ này chỉ là phần giữ chỗ và bạn sẽ cần thay thế chúng bằng đường dẫn và tên tệp phông chữ thực của mình. Ngoài ra, bạn phải đảm bảo rằng các tệp phông chữ tùy chỉnh của bạn được nhập chính xác vào dự án của bạn và đường dẫn của chúng khớp với những đường dẫn được xác định trong đối tượng họ phông chữ của bạn.

Suy nghĩ cuối cùng về phông chữ tùy chỉnh trong React Native

Phông chữ tùy chỉnh có thể thêm nét độc đáo và được cá nhân hóa vào ứng dụng React Native của bạn. Trong bài viết này, chúng ta đã thảo luận về cách sử dụng phông chữ tùy chỉnh trong React Native, bao gồm nhập tệp phông chữ, đặt phông chữ tùy chỉnh làm phông chữ mặc định cho toàn bộ ứng dụng, tạo họ phông chữ tùy chỉnh với nhiều kiểu phông chữ và tải phông chữ tùy chỉnh mà không cần sử dụng hội chợ triển lãm.

Luôn kiểm tra các giới hạn cấp phép của bất kỳ phông chữ nào bạn sử dụng và đảm bảo bạn có quyền sử dụng phông chữ đó trong ứng dụng của mình. Cũng cần lưu ý rằng việc tải nhiều phông chữ tùy chỉnh có thể làm tăng kích thước ứng dụng của bạn, vì vậy bạn chỉ nên đưa vào những phông chữ mà bạn thực sự cần.