עקוב אחר עקרונות טיפוגרפיים קוליים והוסף קצת אישיות לאפליקציה שלך עם גופן מותאם אישית.

React Native מספק מספר סגנונות גופנים המוגדרים כברירת מחדל לבחירה בעת בניית האפליקציה שלך. עם זאת, כדי להציע לאפליקציה שלך את המקוריות והאינדיבידואליות הדרושה לה כדי להתבלט בשוק צפוף, ייתכן שתצטרך מדי פעם להשתמש בגופנים מותאמים אישית.

בואו ללמוד כיצד להחיל גופנים מותאמים אישית בעת בניית פרויקט React Native הבא שלכם.

הבנת פורמטי קבצי גופנים

עם React Native, אתה יכול להוסיף קובצי גופן מותאמים אישית לפרויקט ולהתאים אישית את המראה של רכיבי טקסט באפליקציות שלך. גופנים מותאמים אישית אלה מגיעים בקובצי גופן עם פורמטים שונים של קבצים. הקבצים מכילים מידע סגנון מקודד עבור גופן ספציפי.

הפורמטים הנפוצים ביותר של קבצי גופנים שבהם תשתמש בפיתוח נייד של React Native הם:

  • גופן TrueType (TTF): זהו פורמט קובץ גופן נפוץ שרוב מערכות ההפעלה והיישומים תומכים בו. קבצי TTF קטנים יחסית ויכולים להכיל תווים רבים.
  • גופן OpenType (OTF): הוא דומה ל-TTF אך יכול להכיל גם תכונות טיפוגרפיות מתקדמות. קבצי OTF גדולים יותר מקבצי TTF ולא כל אפליקציה תומכת בהם.
    • instagram viewer
  • גופן OpenType מוטבע (EOT): קובצי EOT דחוסים ויכולים לכלול מידע על ניהול זכויות דיגיטליות (DRM) כדי למנוע שימוש לא מורשה. עם זאת, לא כל הדפדפנים תומכים ב-EOT ובדרך כלל זה לא מומלץ לשימוש בפרויקטים מודרניים.

בעת שימוש בפונטים מותאמים אישית בפרויקט, חשוב לבחור פורמט קובץ גופן העונה על צרכי הפרויקט. זה עשוי להיות כרוך בגורמים כגון תמיכת פלטפורמת יעד, גודל קובץ, דרישות רישוי ותמיכה בתכונות טיפוגרפיות מתקדמות.

ייבוא ​​והחלת קובצי גופן ב-React Native

אתה יכול להוריד קובץ גופן מכל מקום באינטרנט ולייבא אותו לפרויקט React Native האישי שלך לשימוש. למרות זאת, יש הרבה אתרים טובים ובטוחים להורדת גופנים בחינם מאת בצורה מאובטחת.

כדי לייבא קובץ גופן לפרויקט React Native שלך, צור קובץ נכסים/גופנים ספרייה בשורש הפרויקט שלך, והעבר לתוכה קבצי גופנים.

השלבים הנדרשים לשימוש בגופנים מותאמים אישית משתנים כאשר עובדים עם פרויקט גרידא שנוצר על ידי React Native או פרויקט React Native בניהול Expo.

תגובה מקורית CLI

אם אתה עובד עם פרויקט שנוצר על ידי React Native CLI, צור א react-native.config.js קובץ והגדר את ההגדרות האלה בתוכו:

מודול‎.exports = {
 פרויקט: {
 ios: {},
 אנדרואיד: {}
 },
 נכסים: [ './assets/fonts/' ],
}

תצורה זו אומרת לפרויקט לכלול נכסי גופנים המאוחסנים ב- "./assets/fonts/" ספרייה כך שהאפליקציה תוכל לגשת אליהם בעת רינדור רכיבי טקסט.

לאחר מכן תוכל לקשר את נכסים תיקיה לפרויקט שלך על ידי הפעלת הפעולות הבאות:

npx react-native-asset

זה יעבוד רק על גרסאות חדשות יותר של אפליקציות React Native מ-0.69 ומעלה. פרויקטים ישנים יותר של React Native צריכים להפעיל את הפקודה הזו במקום זאת:

קישור npx react-native

כעת אתה יכול להשתמש בגופנים המותאמים אישית המקושרים כפי שאתה עושה בדרך כלל בסגנון ה-CSS שלך על ידי קריאה בשמם המדויק בסגנון משפחת הגופנים:

שלום, עולם!</Text>
const styles = StyleSheet.create({
 fontText: {
 משפחת גופן: 'הטיה פריזמה',
 גודל גופן: 20,
 },
});

Expo-CLI

עבור פרויקטים שנוצרו ב-Expo, עליך להתקין את ספריית ה-Expo-fonts כתלות בייבוא ​​והחלת גופנים מותאמים אישית. התקן אותו עם הפקודה הזו:

npx expo להתקין גופן expo

עכשיו אתה יכול להשתמש בפונטים של expo בקובץ הפרויקט שלך כך:

יְבוּא תגובה, { useState, useEffect } מ'לְהָגִיב';
יְבוּא { Text, View, StyleSheet } מ'תגובה-יליד';
יְבוּא * כפי ש גוֹפָן מ'expo-font';
const טקסט מותאם אישית = (אביזרים) => {
const [fontLoaded, setFontLoaded] = useState(שֶׁקֶר);


 useEffect(() => {
אסינכרוןפוּנקצִיָהloadFont() {
לְהַמתִין Font.loadAsync({
'גופן מותאם אישית': לִדרוֹשׁ('./assets/fonts/CustomFont.ttf'),
 });


 setFontLoaded(נָכוֹן);
 }


 loadFont();
 }, []);


אם (!fontLoaded) {
לַחֲזוֹר<טֶקסט>טוען...טֶקסט>;
 }


לַחֲזוֹר (
משפחת גופן: 'גופן מותאם אישית' }}>
 {props.children}
 </Text>
 );
};


const אפליקציה = () => {
לַחֲזוֹר (

שלום, עולם!</CustomText>
 </View>
 );
};


const styles = StyleSheet.create({
 מיכל: {
 לְהַגמִישׁ: 1,
 justifyContent: 'מֶרְכָּז',
 alignItems: 'מֶרְכָּז',
 },
 טקסט: {
 גודל גופן: 24,
 משקל גופן: 'נוֹעָז',
 },
});
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

אתה יכול לשפר ולשפר את בלוק הקוד לעיל טוב יותר על ידי יישום ה דפוס עיצוב מיכל ורכיבי מצגת.

להלן הפלט של האפליקציות React Native CLI ו-Expo CLI:

2 תמונות

הגדרת גופן מותאם אישית כגופן ברירת המחדל עבור אפליקציית Expo שלך

ייתכן שתרצה להשתמש בגופן מותאם אישית כגופן ברירת המחדל עבור כל אפליקציית React Native שלך ​​במקום להחיל אותו על כל טֶקסט רכיב בנפרד. כדי לעשות זאת, אתה יכול להשתמש ב- טֶקסט של הרכיב defaultProps כדי להגדיר את משפחת הגופנים המוגדרת כברירת מחדל עבור כולם טֶקסט רכיבים באפליקציה שלך.

להשתמש ב Text.defaultProps מאפיין להגדיר את משפחת גופן מאפיין לשם הגופן המותאם אישית שלך.

הנה דוגמה:

יְבוּא הגיבו, { useEffect } מ'לְהָגִיב';
יְבוּא { טקסט } מ'תגובה-יליד';
יְבוּא * כפי ש גוֹפָן מ'expo-font';
const אפליקציה = () => {
 useEffect(() => {
אסינכרוןפוּנקצִיָהloadFont() {
לְהַמתִין Font.loadAsync({
'גופן מותאם אישית': לִדרוֹשׁ('./assets/fonts/CustomFont.ttf'),
 });


 Text.defaultProps.style.fontFamily = 'גופן מותאם אישית';
 }


 loadFont();
 }, []);


לַחֲזוֹר (
שלום, עולם!</Text>
 );
};
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

הגדרת משפחת הגופנים המוגדרת כברירת מחדל באמצעות Text.defaultProps ישפיע רק על רכיבי טקסט שנוצרים לאחר הגדרת ברירת המחדל. אם כבר יצרת רכיבי טקסט לפני הגדרת משפחת הגופנים המוגדרת כברירת מחדל, תצטרך להגדיר את משפחת גופן רכוש על אותם רכיבים בנפרד.

יצירת משפחת גופנים מותאמת אישית עם סגנונות גופנים מרובים

כדי ליצור משפחת גופנים מותאמת אישית עם מספר סגנונות גופנים באפליקציה שנוצרה על ידי React Native CLI, תחילה יהיה עליך לייבא את קובצי הגופן לפרויקט שלך. לאחר מכן צור אובייקט משפחת גופנים מותאם אישית הממפה את משקלי הגופנים והסגנונות לנתיבי קובץ הגופנים המתאימים להם.

לדוגמה:

יְבוּא { טקסט } מ'תגובה-יליד';
יְבוּא גופנים מותאמים אישית מ'../config/Fonts';
const אפליקציה = () => {
const גופנים מותאמים אישית = {
'CustomFont-Regular': לִדרוֹשׁ('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Bold': לִדרוֹשׁ('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italic': לִדרוֹשׁ('../fonts/CustomFont-Italic.ttf'),
 };


אסינכרון componentDidMount() {
לְהַמתִין Font.loadAsync (CustomFonts);
 }


לַחֲזוֹר(

 שלום עולם!
 </Text>
 );
};


const styles = StyleSheet.create({
 טקסט: {
 משפחת גופן: 'CustomFont-Regular',
 סיגנון גופן: 'נטה',
 משקל גופן: 'נוֹעָז',
 גודל גופן: 20,
 },
});
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

שימו לב שהנתיבים והשמות של קבצי הגופן בדוגמה זו הם רק מצייני מיקום, ותצטרכו להחליף אותם בנתיבים ובשמות האמיתיים של קבצי הגופן. בנוסף, עליך לוודא שקובצי הגופנים המותאמים אישית שלך מיובאים כהלכה לפרוייקט שלך ושהנתיבים שלהם תואמים לאלו שהוגדרו באובייקט משפחת הגופנים שלך.

מחשבות אחרונות על גופנים מותאמים אישית ב-React Native

גופנים מותאמים אישית יכולים להוסיף מגע ייחודי ומותאם אישית לאפליקציית React Native שלך. במאמר זה, דנו כיצד להשתמש בגופנים מותאמים אישית ב-React Native, כולל ייבוא ​​קובצי גופן, הגדרת גופן מותאם אישית כ גופן ברירת המחדל עבור האפליקציה כולה, יצירת משפחת גופנים מותאמת אישית עם מספר סגנונות גופנים וטעינת גופנים מותאמים אישית ללא שימוש תערוכה.

בדוק תמיד את מגבלות הרישוי של כל גופן שבו אתה משתמש וודא שיש לך הרשאה להשתמש בו באפליקציה שלך. חשוב גם לזכור שטעינת גופנים מותאמים אישית מרובים יכולה להגדיל את גודל האפליקציה שלך, לכן עליך לכלול רק את הגופנים שאתה באמת צריך.