react-native
मन चाहा वर्ण

रीऐक्टिव नेटिव (Android) में कस्टम फोंट का उपयोग करने के लिए कदम

1. android/app/src/main/assets/fonts/font_name.ttf अंदर अपने फोंट फ़ाइल को चिपकाएँ
2. react-native run-android चलाकर एंड्रॉइड ऐप को फिर से दबाएं
3. अब, आप अपने fontFamily: 'font_name' नेटिव स्टाइल्स में fontFamily: 'font_name' उपयोग कर सकते हैं

रीऐक्टिव नेटिव (iOS) में कस्टम फोंट का उपयोग करने के लिए कदम

1. अपने Xcode प्रोजेक्ट में फ़ॉन्ट शामिल करें।

2. सुनिश्चित करें कि वे लक्ष्य सदस्यता कॉलम में शामिल हैं

नेविगेटर से फ़ॉन्ट पर क्लिक करें, और जांचें कि क्या फ़ॉन्ट शामिल है।

3. जांचें कि क्या आपके बंडल में संसाधन के रूप में शामिल फ़ॉन्ट है

अपनी Xcode प्रोजेक्ट फ़ाइल पर क्लिक करें, "बिल्ड चरणों का चयन करें," कॉपी बंडल रिसोर्सेस "का चयन करें। जांचें कि क्या आपका फ़ॉन्ट जोड़ा गया है।

4. एप्लिकेशन प्लिस्ट में फॉन्ट शामिल करें (Info.plist)

एप्लिकेशन मुख्य फ़ोल्डर से Info.plist खोलें, "सूचना संपत्ति सूची" पर क्लिक करें, और फिर प्लस चिह्न (+) पर क्लिक करें। ड्रॉप डाउन सूची से "एप्लिकेशन द्वारा प्रदान किए गए फ़ॉन्ट्स" चुनें।

5. एप्लिकेशन द्वारा प्रदान किए गए फ़ॉन्ट्स में फ़ॉन्ट नाम जोड़ें

एप्लिकेशन द्वारा प्रदान किए गए फ़ॉन्ट का विस्तार करें और मान स्तंभ में बिल्कुल फ़ॉन्ट नाम जोड़ें

6. अनुप्रयोग में इसका उपयोग करें

    <Text style={{fontFamily:'IndieFlower'}}>
      Welcome to React Native!
    </Text>
   

एंड्रॉइड और IOS दोनों के लिए कस्टम फोंट

• अपने प्रोजेक्ट फ़ोल्डर में एक फ़ोल्डर बनाएँ, और उसमें अपने फोंट जोड़ें। उदाहरण:

  • उदाहरण: यहाँ हमने "मिस्टफ" नामक रूट में एक फोल्डर जोड़ा, फिर "फोंट", और इसके अंदर हमने अपने फोंट को रखा:
    • 

• नीचे दिए गए कोड को package.json में जोड़ें।

  {
      ...
  
      "rnpm": {
          "assets": [
            "path/to/fontfolder"
          ]
      },
  
      ...
  }
  

  • ऊपर के उदाहरण के लिए, हमारे package.json में अब "मिस्टफ / फोंट" का एक पथ होगा:

    "rnpm": {
      "assets": [
        "mystuff/fonts"
      ]
    }
    

• react-native link कमांड चलाएँ।

• कोड के नीचे प्रोजेक्ट पर कस्टम फोंट का उपयोग करना

  <Text style={{ fontFamily: 'FONT-NAME' }}>
      My Text
  </Text>
  

  जहाँ FONT-NAME विशिष्ट उपसर्ग मंच है।

  एंड्रॉयड

  फ़ाइल में एक्सटेंशन से पहले FONT-NAME शब्द हैं। उदाहरण: आपके फ़ॉन्ट का फ़ाइल नाम Roboto-Regular.ttf , इसलिए आप fontFamily: Roboto-Regular सेट fontFamily: Roboto-Regular ।

  आईओएस

  फॉण्ट-नेम "फुल नेम" है जो फॉन्ट फाइल पर राइट क्लिक करने के बाद मिलता है, फिर "गेट इन्फो" पर क्लिक करें। (स्रोत: https://stackoverflow.com/a/16788493/2529614 ), नीचे स्क्रीनशॉट में, फ़ाइल का नाम MM Proxima Nova Ultra bold.otf , हालाँकि "Full Name" "Proxima Nova Semibold" है, इस प्रकार आप चाहेंगे सेट fontFamily: Proxima Nova Semibold । स्क्रीनशॉट -

• रन react-native run-ios या react-native run-android फिर से react-native run-android (यह संसाधनों के साथ फिर से जुड़ जाएगा)