प्रतिक्रियाशील मूल में कस्टम फ़ॉन्ट्स का उपयोग करने पर एक गाइड

रिएक्टिव नेटिव आपके एप्लिकेशन का निर्माण करते समय चुनने के लिए कई डिफ़ॉल्ट फ़ॉन्ट शैली प्रदान करता है। हालांकि, अपने ऐप को मौलिकता और वैयक्तिकता प्रदान करने के लिए इसे एक भीड़ भरे बाजार में खड़ा करने की आवश्यकता है, आपको कभी-कभी कस्टम फोंट का उपयोग करने की आवश्यकता हो सकती है।

आइए जानें कि अपना अगला रिएक्टिव नेटिव प्रोजेक्ट बनाते समय कस्टम फोंट कैसे लागू करें।

फ़ॉन्ट फ़ाइल स्वरूपों को समझना

रिएक्ट नेटिव के साथ, आप किसी प्रोजेक्ट में कस्टम फ़ॉन्ट फ़ाइलें जोड़ सकते हैं और अपने ऐप्स में टेक्स्ट तत्वों की उपस्थिति को कस्टमाइज़ कर सकते हैं। ये कस्टम फोंट विभिन्न फ़ाइल स्वरूपों के साथ फ़ॉन्ट फाइलों में आते हैं। फ़ाइलों में एक विशिष्ट फ़ॉन्ट टाइपफेस के लिए एन्कोडेड स्टाइलिंग जानकारी होती है।

रिएक्टिव नेटिव मोबाइल विकास में आपके द्वारा उपयोग किए जाने वाले सबसे सामान्य फ़ॉन्ट फ़ाइल स्वरूप हैं:

• ट्रू टाइप फ़ॉन्ट (टीटीएफ): यह एक सामान्य फ़ॉन्ट फ़ाइल स्वरूप है जो कि अधिकांश ऑपरेटिंग सिस्टम और एप्लिकेशन समर्थन करते हैं। TTF फाइलें अपेक्षाकृत छोटी होती हैं और इनमें कई अक्षर हो सकते हैं।
instagram viewer
• ओपन टाइप फॉन्ट (ओटीएफ): यह टीटीएफ के समान है लेकिन इसमें उन्नत टाइपोग्राफिक फीचर भी शामिल हो सकते हैं। OTF फाइलें TTF फाइलों से बड़ी होती हैं और हर एप्लिकेशन उनका समर्थन नहीं करती है।
• एंबेडेड ओपनटाइप फ़ॉन्ट (ईओटी): ईओटी फाइलें संपीड़ित हैं और अनधिकृत उपयोग को रोकने के लिए डिजिटल अधिकार प्रबंधन (डीआरएम) जानकारी शामिल कर सकती हैं। हालाँकि, सभी ब्राउज़र ईओटी का समर्थन नहीं करते हैं और आमतौर पर आधुनिक परियोजनाओं में उपयोग के लिए इसकी अनुशंसा नहीं की जाती है।

किसी प्रोजेक्ट में कस्टम फोंट का उपयोग करते समय, एक फ़ॉन्ट फ़ाइल प्रारूप चुनना महत्वपूर्ण है जो प्रोजेक्ट की ज़रूरतों को पूरा करता है। इसमें लक्ष्य प्लेटफ़ॉर्म समर्थन, फ़ाइल आकार, लाइसेंसिंग आवश्यकताएं और उन्नत टाइपोग्राफ़िक सुविधाओं के लिए समर्थन जैसे कारक शामिल हो सकते हैं।

रिएक्टिव नेटिव में फॉन्ट फाइल इम्पोर्ट और अप्लाई करना

आप इंटरनेट पर कहीं से भी एक फ़ॉन्ट फ़ाइल डाउनलोड कर सकते हैं और उपयोग करने के लिए इसे अपने व्यक्तिगत रिएक्टिव नेटिव प्रोजेक्ट में आयात कर सकते हैं। हालाँकि, मुफ्त फोंट डाउनलोड करने के लिए कई अच्छी, सुरक्षित वेबसाइटें हैं सुरक्षित रूप से।

अपने रिएक्टिव नेटिव प्रोजेक्ट में फॉन्ट फाइल इम्पोर्ट करने के लिए, एक फॉन्ट फाइल बनाएं संपत्ति / फोंट निर्देशिका को अपने प्रोजेक्ट की जड़ में रखें, और उसमें फ़ॉन्ट फ़ाइलों को स्थानांतरित करें।

कस्टम फोंट का उपयोग करने के लिए आवश्यक चरण पूरी तरह से रिएक्टिव नेटिव-जेनरेट किए गए प्रोजेक्ट या एक्सपो-प्रबंधित रिएक्ट नेटिव प्रोजेक्ट के साथ काम करते समय अलग-अलग होते हैं।

प्रतिक्रियाशील मूल सीएलआई

यदि आप रिएक्टिव नेटिव सीएलआई-जनित प्रोजेक्ट के साथ काम कर रहे हैं, तो एक बनाएं प्रतिक्रिया-native.config.js फ़ाइल और इसके अंदर इन सेटिंग्स को परिभाषित करें:

मापांकनिर्यात = {
 परियोजना: {
 आईओएस: {},
 एंड्रॉयड: {}
 },
 संपत्ति: [ './संपत्ति/फोंट/' ],
}

यह कॉन्फ़िगरेशन प्रोजेक्ट को इसमें संग्रहीत फ़ॉन्ट संपत्तियों को शामिल करने के लिए कहता है "./संपत्ति/फोंट/" निर्देशिका ताकि टेक्स्ट तत्वों को प्रस्तुत करते समय ऐप उन्हें एक्सेस कर सके।

इसके बाद आप लिंक कर सकते हैं संपत्ति निम्न को चलाकर अपने प्रोजेक्ट में फ़ोल्डर:

npx प्रतिक्रिया-मूल-संपत्ति

एनपीएक्स प्रतिक्रिया-मूल लिंक

अब आप लिंक किए गए कस्टम फोंट का उपयोग कर सकते हैं जैसा कि आप आमतौर पर अपने सीएसएस स्टाइल में फॉन्ट-पारिवारिक शैली में उनके सटीक नाम को कॉल करके करते हैं:

हैलो, दुनिया!</Text>
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 फ़ॉन्ट टेक्स्ट: {
 फुहारा परिवार: 'झुकाव प्रिज्म',
 फ़ॉन्ट आकार: 20,
 },
});

एक्सपो-सीएलआई

एक्सपो-जेनरेट की गई परियोजनाओं के लिए, आपको कस्टम फोंट आयात करने और लागू करने के लिए एक्सपो-फोंट लाइब्रेरी को निर्भरता के रूप में स्थापित करना चाहिए। इसे इस आदेश के साथ स्थापित करें:

npx एक्सपो एक्सपो-फ़ॉन्ट स्थापित करें

अब आप अपनी प्रोजेक्ट फ़ाइल में एक्सपो-फोंट का उपयोग इस प्रकार कर सकते हैं:

आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया';
आयात {पाठ, दृश्य, स्टाइलशीट} से'प्रतिक्रिया-मूल';
आयात * जैसा फ़ॉन्ट से'एक्सपो-फ़ॉन्ट';
कॉन्स्ट कस्टम टेक्स्ट = (रंगमंच की सामग्री) => {
कॉन्स्ट [फ़ॉन्टलोडेड, सेटफ़ॉन्टलोडेड] = यूज़स्टेट (असत्य);
 उपयोग प्रभाव (() => {
asyncसमारोहलोडफॉन्ट() {
इंतजार फ़ॉन्ट.लोडएसिंक ({
'कस्टम-फ़ॉन्ट': ज़रूरत होना('./assets/fonts/CustomFont.ttf'),
 });
 सेटफॉन्टलोडेड(सत्य);
 }
 लोडफॉन्ट ();
 }, []);
अगर (! फॉन्टलोडेड) {
वापस करना<मूलपाठ>लोड हो रहा है...मूलपाठ>;
 }
वापस करना (
फुहारा परिवार: 'कस्टम-फ़ॉन्ट' }}>
 {सहारा.बच्चों}
 </Text>
 );
};
कॉन्स्ट ऐप = () => {
वापस करना (

हैलो, दुनिया!</CustomText>
 </View>
 );
};
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 कंटेनर: {
 मोड़ना: 1,
 औचित्य सामग्री: 'केंद्र',
 संरेखित आइटम: 'केंद्र',
 },
 मूलपाठ: {
 फ़ॉन्ट आकार: 24,
 फ़ॉन्ट वजन: 'निडर',
 },
});
निर्यातगलती करना अनुप्रयोग;

आप उपरोक्त कोड ब्लॉक को लागू करके बेहतर सुधार और सुधार कर सकते हैं कंटेनर और प्रस्तुतिकरण घटक डिजाइन पैटर्न.

यहां रिएक्ट नेटिव सीएलआई और एक्सपो सीएलआई ऐप दोनों का आउटपुट दिया गया है:

अपने एक्सपो ऐप के लिए कस्टम फ़ॉन्ट को डिफ़ॉल्ट फ़ॉन्ट के रूप में सेट करना

हो सकता है कि आप कस्टम फॉन्ट को प्रत्येक पर लागू करने के बजाय अपने संपूर्ण रिएक्टिव नेटिव ऐप के लिए डिफ़ॉल्ट फॉन्ट के रूप में उपयोग करना चाहें मूलपाठ घटक व्यक्तिगत रूप से। ऐसा करने के लिए, आप का उपयोग कर सकते हैं मूलपाठ अवयव defaultProps सभी के लिए डिफ़ॉल्ट फ़ॉन्ट परिवार सेट करने के लिए मूलपाठ आपके ऐप में घटक।

उपयोग Text.defaultProps संपत्ति सेट करने के लिए फुहारा परिवार संपत्ति आपके कस्टम फ़ॉन्ट के नाम पर।

यहाँ एक उदाहरण है:

आयात प्रतिक्रिया, {उपयोग प्रभाव} से'प्रतिक्रिया';
आयात { मूलपाठ } से'प्रतिक्रिया-मूल';
आयात * जैसा फ़ॉन्ट से'एक्सपो-फ़ॉन्ट';
कॉन्स्ट ऐप = () => {
 उपयोग प्रभाव (() => {
asyncसमारोहलोडफॉन्ट() {
इंतजार फ़ॉन्ट.लोडएसिंक ({
'कस्टम-फ़ॉन्ट': ज़रूरत होना('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'कस्टम-फ़ॉन्ट';
 }
 लोडफॉन्ट ();
 }, []);
वापस करना (
हैलो, दुनिया!</Text>
 );
};
निर्यातगलती करना अनुप्रयोग;

डिफ़ॉल्ट फ़ॉन्ट परिवार का उपयोग करके सेट करना Text.defaultProps डिफ़ॉल्ट सेट होने के बाद बनाए गए टेक्स्ट घटकों को ही प्रभावित करेगा। यदि आपने डिफ़ॉल्ट फ़ॉन्ट परिवार सेट करने से पहले ही पाठ घटक बना लिए हैं, तो आपको सेट करने की आवश्यकता होगी फुहारा परिवार व्यक्तिगत रूप से उन घटकों पर संपत्ति।

एकाधिक फ़ॉन्ट शैलियों के साथ एक कस्टम फ़ॉन्ट परिवार बनाना

रिएक्टिव नेटिव सीएलआई-जेनरेट किए गए ऐप में कई फॉन्ट स्टाइल के साथ एक कस्टम फॉन्ट फैमिली बनाने के लिए, आपको सबसे पहले फॉन्ट फाइल को अपने प्रोजेक्ट में इम्पोर्ट करना होगा। फिर एक कस्टम फॉन्ट फैमिली ऑब्जेक्ट बनाएं जो फॉन्ट वेट और स्टाइल को उनके संबंधित फॉन्ट फाइल पाथ में मैप करता है।

उदाहरण के लिए:

आयात { मूलपाठ } से'प्रतिक्रिया-मूल';
आयात कस्टम फोंट से'../config/फ़ॉन्ट्स';
कॉन्स्ट ऐप = () => {
कॉन्स्ट कस्टमफ़ॉन्ट्स = {
'कस्टमफ़ॉन्ट-नियमित': ज़रूरत होना('../fonts/CustomFont-Regular.ttf'),
'कस्टमफ़ॉन्ट-बोल्ड': ज़रूरत होना('../fonts/CustomFont-Bold.ttf'),
'कस्टमफ़ॉन्ट-इटैलिक': ज़रूरत होना('../fonts/CustomFont-Italic.ttf'),
 };
async घटकडिडमाउंट () {
इंतजार Font.loadAsync (कस्टमफ़ॉन्ट्स);
 }
वापस करना(

 हैलो वर्ल्ड!
 </Text>
 );
};
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 मूलपाठ: {
 फुहारा परिवार: 'कस्टमफ़ॉन्ट-नियमित',
 लिपि शैली: 'इटैलिक',
 फ़ॉन्ट वजन: 'निडर',
 फ़ॉन्ट आकार: 20,
 },
});
निर्यातगलती करना अनुप्रयोग;

ध्यान दें कि इस उदाहरण में फ़ॉन्ट फ़ाइल पथ और नाम केवल प्लेसहोल्डर हैं, और आपको उन्हें अपने वास्तविक फ़ॉन्ट फ़ाइल पथ और नामों से बदलने की आवश्यकता होगी। इसके अतिरिक्त, आपको यह सुनिश्चित करना होगा कि आपकी कस्टम फ़ॉन्ट फ़ाइलें आपके प्रोजेक्ट में सही तरीके से आयात की गई हैं और उनके पथ आपके फ़ॉन्ट पारिवारिक ऑब्जेक्ट में परिभाषित पथ से मेल खाते हैं।

प्रतिक्रियाशील मूल में कस्टम फ़ॉन्ट्स पर अंतिम विचार

कस्टम फोंट आपके रिएक्टिव नेटिव ऐप में एक अनूठा और वैयक्तिकृत स्पर्श जोड़ सकते हैं। इस लेख में, हमने चर्चा की है कि रिएक्टिव नेटिव में कस्टम फॉन्ट का उपयोग कैसे करें, जिसमें फॉन्ट फाइल आयात करना, कस्टम फॉन्ट को सेट करना शामिल है। संपूर्ण ऐप के लिए डिफ़ॉल्ट फ़ॉन्ट, कई फ़ॉन्ट शैलियों के साथ एक कस्टम फ़ॉन्ट परिवार बनाना और उपयोग किए बिना कस्टम फ़ॉन्ट लोड करना एक्सपो।

आपके द्वारा उपयोग किए जाने वाले किसी भी फ़ॉन्ट के लाइसेंस प्रतिबंधों की हमेशा जांच करें और सुनिश्चित करें कि आपके पास अपने ऐप में इसका उपयोग करने की अनुमति है। यह ध्यान रखना भी महत्वपूर्ण है कि एकाधिक कस्टम फोंट लोड करने से आपके ऐप का आकार बढ़ सकता है, इसलिए आपको केवल उन फोंट को शामिल करना चाहिए जिनकी आपको वास्तव में आवश्यकता है।