اتبع مبادئ الطباعة الصوتية وأضف بعض السمات إلى تطبيقك بخط مخصص.

يوفر React Native العديد من أنماط الخطوط الافتراضية للاختيار من بينها عند إنشاء تطبيقك. ومع ذلك ، لتقديم تطبيقك الأصالة والتفرد الذي يحتاجه ليبرز في سوق مزدحم ، قد تحتاج أحيانًا إلى استخدام خطوط مخصصة.

دعنا نتعلم كيفية تطبيق الخطوط المخصصة عند إنشاء مشروع React Native التالي.

التعرف على تنسيقات ملفات الخطوط

باستخدام React Native ، يمكنك إضافة ملفات خطوط مخصصة إلى مشروع وتخصيص مظهر عناصر النص في تطبيقاتك. تأتي هذه الخطوط المخصصة في ملفات خطوط بتنسيقات ملفات مختلفة. تحتوي الملفات على معلومات نمط مشفرة لمحرف خط معين.

تنسيقات ملفات الخطوط الأكثر شيوعًا التي ستستخدمها في تطوير React Native للجوال هي:

  • خط تروتايب (TTF): هذا تنسيق ملف خط شائع تدعمه معظم أنظمة التشغيل والتطبيقات. ملفات TTF صغيرة نسبيًا ويمكن أن تحتوي على العديد من الأحرف.
  • OpenType Font (OTF): إنه مشابه لـ TTF ولكن يمكن أن يحتوي أيضًا على ميزات طباعة متقدمة. ملفات OTF أكبر من ملفات TTF ولا يدعمها كل تطبيق.
  • خط OpenType مضمّن (EOT): يتم ضغط ملفات EOT ويمكن أن تتضمن معلومات إدارة الحقوق الرقمية (DRM) لمنع الاستخدام غير المصرح به. ومع ذلك ، لا تدعم جميع المتصفحات EOT ولا يوصى باستخدامها بشكل عام في المشاريع الحديثة.
    instagram viewer

عند استخدام الخطوط المخصصة في مشروع ، من المهم اختيار تنسيق ملف خط يلبي احتياجات المشروع. قد يشمل ذلك عوامل مثل دعم النظام الأساسي المستهدف وحجم الملف ومتطلبات الترخيص ودعم ميزات الطباعة المتقدمة.

استيراد وتطبيق ملفات الخطوط في React Native

يمكنك تنزيل ملف خط من أي مكان على الإنترنت واستيراده إلى مشروع React Native الشخصي لاستخدامه. لكن، هناك العديد من المواقع الجيدة والآمنة لتنزيل الخطوط المجانية من بشكل آمن.

لاستيراد ملف خط إلى مشروع React Native الخاص بك ، قم بإنشاء ملف الأصول / الخطوط الدليل في جذر مشروعك ، وانقل ملفات الخط إليه.

تختلف الخطوات المطلوبة لاستخدام الخطوط المخصصة عند العمل مع مشروع React Native محض أو مشروع React Native مُدار من Expo.

تفاعل CLI الأصلي

إذا كنت تعمل مع مشروع React Native CLI الذي تم إنشاؤه ، فأنشئ ملف رد فعل أصلي.config.js ملف وحدد هذه الإعدادات بداخله:

وحدة.exports = {
 مشروع: {
 iOS: {}،
 ذكري المظهر: {}
 },
 أصول: [ "./assets/fonts/" ],
}

يخبر هذا التكوين المشروع بتضمين أصول الخط المخزنة في ملف "./assets/fonts/" الدليل بحيث يمكن للتطبيق الوصول إليها عند عرض عناصر النص.

يمكنك بعد ذلك ربط ملف أصول مجلد إلى مشروعك عن طريق تشغيل ما يلي:

npx رد فعل أصلي الأصول

سيعمل هذا فقط على الإصدارات الأحدث من تطبيقات React Native بدءًا من 0.69 وما فوق. يجب أن تقوم مشاريع React Native الأقدم بتشغيل هذا الأمر بدلاً من ذلك:

رابط التفاعل الأصلي npx

يمكنك الآن استخدام الخطوط المخصصة المرتبطة كما تفعل عادةً في نمط CSS الخاص بك عن طريق استدعاء اسمها الدقيق في نمط عائلة الخطوط:

مرحبًا بالعالم!/Text>
مقدار ثابت الأنماط = StyleSheet.create ({
 fontText: {
 خط العائلة: "موشور الإمالة",
 حجم الخط: 20,
 },
});

معرض CLI

بالنسبة للمشاريع التي تم إنشاؤها في Expo ، يجب عليك تثبيت مكتبة expo-Fonts كعنصر تبعية لاستيراد الخطوط المخصصة وتطبيقها. قم بتثبيته باستخدام هذا الأمر:

npx expo install expo-font

يمكنك الآن استخدام خطوط العرض في ملف مشروعك مثل:

يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد {Text، View، StyleSheet} من"رد فعل أصلي";
يستورد * مثل الخط من"خط المعرض";
مقدار ثابت CustomText = (الدعائم) => {
مقدار ثابت [fontLoaded، setFontLoaded] = useState (خطأ شنيع);


 useEffect (() => {
غير متزامنوظيفةتحميل() {
انتظر Font.loadAsync ({
'خط مخصص': يتطلب("./assets/fonts/CustomFont.ttf"),
 });


 setFontLoaded (حقيقي);
 }


 loadFont () ،
 }, []);


لو (! fontLoaded) {
يعود<نص>تحميل...نص>;
 }


يعود (
خط العائلة: 'خط مخصص' }}>
 {props.children}
 </Text>
 );
};


مقدار ثابت التطبيق = () => {
يعود (

أهلاً بالعالم!/CustomText>
 </View>
 );
};


مقدار ثابت الأنماط = StyleSheet.create ({
 حاوية: {
 ثني: 1,
 تبرير المحتوى: 'مركز',
 العناصر: 'مركز',
 },
 نص: {
 حجم الخط: 24,
 وزن الخط: 'عريض',
 },
});
يصدّرتقصير برنامج؛

يمكنك تجديد وتحسين كتلة التعليمات البرمجية أعلاه بشكل أفضل من خلال تطبيق الحاوية ونمط تصميم مكونات العرض.

فيما يلي ناتج تطبيقي React Native CLI و Expo CLI:

2 صور

تعيين خط مخصص باعتباره الخط الافتراضي لتطبيق Expo الخاص بك

قد ترغب في استخدام خط مخصص كخط افتراضي لتطبيق React Native بأكمله بدلاً من تطبيقه على كل منهما نص مكون بشكل فردي. للقيام بذلك ، يمكنك استخدام ملف نص عناصر الافتراضي لتعيين عائلة الخط الافتراضية للجميع نص المكونات في تطبيقك.

استخدم ال النص الافتراضي الخاصية لتعيين خط العائلة خاصية اسم الخط المخصص الخاص بك.

هذا مثال:

يستورد رد فعل ، {useEffect} من'تتفاعل';
يستورد { نص } من"رد فعل أصلي";
يستورد * مثل الخط من"خط المعرض";
مقدار ثابت التطبيق = () => {
 useEffect (() => {
غير متزامنوظيفةتحميل() {
انتظر Font.loadAsync ({
'خط مخصص': يتطلب("./assets/fonts/CustomFont.ttf"),
 });


 Text.defaultProps.style.fontFamily = 'خط مخصص';
 }


 loadFont () ،
 }, []);


يعود (
أهلاً بالعالم!/Text>
 );
};
يصدّرتقصير برنامج؛

تعيين عائلة الخط الافتراضية باستخدام النص الافتراضي سيؤثر فقط على مكونات النص التي تم إنشاؤها بعد تعيين الافتراضي. إذا كنت قد أنشأت مكونات نص بالفعل قبل تعيين عائلة الخط الافتراضية ، فستحتاج إلى تعيين ملف خط العائلة الملكية على تلك المكونات بشكل فردي.

إنشاء مجموعة خطوط مخصصة ذات أنماط خطوط متعددة

لإنشاء عائلة خطوط مخصصة مع أنماط خطوط متعددة في تطبيق React Native CLI الذي تم إنشاؤه ، ستحتاج أولاً إلى استيراد ملفات الخطوط إلى مشروعك. ثم قم بإنشاء كائن عائلة خط مخصص يقوم بتعيين أوزان الخطوط وأنماطها إلى مسارات ملفات الخطوط المقابلة لها.

على سبيل المثال:

يستورد { نص } من"رد فعل أصلي";
يستورد خطوط عادية من"../config/Fonts";
مقدار ثابت التطبيق = () => {
مقدار ثابت CustomFonts = {
"CustomFont-Regular": يتطلب("../fonts/CustomFont-Regular.ttf"),
"CustomFont-Bold": يتطلب("../fonts/CustomFont-Bold.ttf"),
"CustomFont-Italic": يتطلب("../fonts/CustomFont-Italic.ttf"),
 };


غير متزامن componentDidMount () {
انتظر Font.loadAsync (CustomFonts) ؛
 }


يعود(

 مرحبا بالعالم!
 </Text>
 );
};


مقدار ثابت الأنماط = StyleSheet.create ({
 نص: {
 خط العائلة: "CustomFont-Regular",
 نوع الخط: "مائل",
 وزن الخط: 'عريض',
 حجم الخط: 20,
 },
});
يصدّرتقصير برنامج؛

لاحظ أن مسارات وأسماء ملفات الخطوط في هذا المثال ما هي إلا عناصر نائبة ، وستحتاج إلى استبدالها بمسارات وأسماء ملفات الخطوط الفعلية. بالإضافة إلى ذلك ، يجب عليك التأكد من أن ملفات الخطوط المخصصة الخاصة بك يتم استيرادها بشكل صحيح إلى مشروعك وأن مساراتها تتطابق مع تلك المحددة في كائن مجموعة الخطوط لديك.

الأفكار النهائية حول الخطوط المخصصة في React Native

يمكن أن تضيف الخطوط المخصصة لمسة فريدة ومخصصة لتطبيق React Native الخاص بك. في هذه المقالة ، ناقشنا كيفية استخدام الخطوط المخصصة في React Native ، بما في ذلك استيراد ملفات الخطوط ، وتعيين خط مخصص مثل الخط الافتراضي للتطبيق بأكمله ، وإنشاء عائلة خطوط مخصصة مع أنماط خطوط متعددة ، وتحميل الخطوط المخصصة دون استخدام اكسبو.

تحقق دائمًا من قيود الترخيص لأي خط تستخدمه وتأكد من أن لديك إذنًا لاستخدامه في تطبيقك. من المهم أيضًا أن تضع في اعتبارك أن تحميل عدة خطوط مخصصة يمكن أن يزيد من حجم التطبيق الخاص بك ، لذلك يجب عليك فقط تضمين الخطوط التي تحتاجها بالفعل.