रिएक्टिव नेटिव में डिफ़ॉल्ट फॉन्ट परिवार कैसे सेट करें?

Question

क्या रिएक्ट नेटिव में इस सीएसएस के बराबर है, ताकि ऐप हर जगह एक ही फ़ॉन्ट का उपयोग करे?

body {
  font-family: 'Open Sans';
}

प्रत्येक पाठ नोड पर इसे मैन्युअल रूप से लागू करना अत्यधिक जटिल लगता है।

Comments

इस प्रश्न के लिए कोई सही उत्तर है ??? मैं किसी भी style.text या ऐसा कुछ भी कॉल नहीं करना चाहता।

— एमडी आशिक

Answer 1

अनुशंसित तरीका यह है कि अपना स्वयं का घटक बनाएं, जैसे कि MyAppText। MyAppText एक साधारण घटक होगा जो आपके सार्वभौमिक शैली का उपयोग करके एक पाठ घटक को प्रस्तुत करता है और अन्य सहारा से गुजर सकता है, आदि।

https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance

Comments

धन्यवाद, ठीक वैसा ही जो मुझे चाहिए था। लगता है जैसे मैंने घटक के दृष्टिकोण को गहराई से समझ नहीं पाया था :)

— डागोबर्ट रेनॉफ

डॉक्स से एक बात जो सुपर क्लियर नहीं है वह यह है कि अपने कंपोनेंट में प्रॉपर्टीज कैसे पास करें और अपने कंपोनेंट पर स्टाइल का सम्मान करें। आप इसे इस तरह कर सकते हैं: gist.github.com/neilsarkar/c9b5fc7e67bbbe4c407eec17deb7311e

— नील सरकार

@NeilSarkar उस उदाहरण के साथ एक समस्या यह है कि स्टाइल कंस्ट्रक्टर में उत्पन्न होता है। नतीजतन, अगर शैली में परिवर्तन होता है, तो आप इसे फिर से प्रस्तुत करना चाहेंगे, लेकिन इस मामले में यह नहीं होगा। इसे render()कंस्ट्रक्टर के बजाय संभाला जाना चाहिए । useMemoअगर दक्षता महत्वपूर्ण है, तो हुक का उपयोग करने से भी मदद मिल सकती है। वैकल्पिक रूप से, यदि आप इसे कंस्ट्रक्टर में रखना चाहते हैं, तो एक componentDidUpdateतर्क जोड़ना महत्वपूर्ण है जो this.styleतब अपडेट होता है जब घटक एक स्टाइल प्रोप परिवर्तन के कारण अपडेट होता है।

— फर्नांडो रोजो

अच्छी बात है, धन्यवाद! ऐसा लगता है कि किसी ने एक रिफ़ॉर्म किए गए संस्करण को भी जोड़ दिया है जो रेंडर विधि में शैलियों को जोड़ती है (एक शुद्ध घटक की, उनके मामले में)

— नील सरकार

Answer 2

हाल ही में एक नोड मॉड्यूल बनाया गया था जो इस समस्या को हल करता है ताकि आपको एक और घटक बनाने की आवश्यकता न हो ।

https://github.com/Ajackster/react-native-global-props

https://www.npmjs.com/package/react-native-global-props

प्रलेखन में कहा गया है कि आपके उच्चतम आदेश घटक में, setCustomTextफ़ंक्शन को इस तरह आयात करें।

import { setCustomText } from 'react-native-global-props';

फिर, प्रतिक्रिया-मूल Textघटक के लिए इच्छित कस्टम स्टाइल / प्रॉप्स बनाएं । आपके मामले में, आप हर घटक पर काम करने के लिए fontFamily चाहेंगे Text।

const customTextProps = { 
  style: { 
    fontFamily: yourFont
  }
}

setCustomTextफ़ंक्शन को कॉल करें और फ़ंक्शन में अपने प्रॉपर / शैलियों को पास करें।

setCustomText(customTextProps);

और फिर सभी प्रतिक्रिया-मूल Textघटकों में आपके द्वारा घोषित किसी भी अन्य सहारा / शैली के साथ-साथ आपके घोषित फ़ॉन्ट भी होंगे।

Comments

घटक रचना का उपयोग करने के लिए मुहावरेदार तरीका एक बेहतर विकल्प की तरह लगता है, हालांकि यह एक शांत हैक है।

— डेनियल लिटिल

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

— मीनाईकेओ

मैं ऊपर 2 समाधानों के बीच झिझक रहा था, वास्तव में मैं अनौपचारिक प्लगइन्स स्थापित करने से नफरत करता हूं क्योंकि प्रतिक्रिया-मूल खुद ही बदलना जारी है, लेकिन अंत में मैं इसे चुनता हूं क्योंकि यह वास्तव में मुझे भारी मात्रा में बचा सकता है। धन्यवाद!

— जांग बज़

तो मुझे कॉल करने की आवश्यकता है <Text style={styles.text}>?? यह सही समाधान नहीं है जैसे body {font-family: 'Open Sans';} कि किसी भी अद्यतन समाधान है ??

— एमडी आशिक

नहीं, आपको करने की आवश्यकता नहीं है Text style={styles.text}>। आपको बस अपने एप्लिकेशन में कहीं पर अपने कस्टम प्रॉप्स को घोषित करने की आवश्यकता है और यह आपके सभी पाठ घटकों पर लागू होगा। यह बहुत समान हैbody {font-family: ....}

— Ajackster

Answer 3

प्रतिक्रियात्मक मूल 0.56.0+ के लिए जाँचें कि क्या डिफ़ॉल्टप्रॉप को पहले परिभाषित किया गया है:

Text.defaultProps = Text.defaultProps || {}

फिर जोड़िए:

Text.defaultProps.style =  { fontFamily: 'some_font' }

App.js फ़ाइल (या आपके पास कोई भी मूल घटक) के निर्माता में ऊपर जोड़ें।

शैली को ओवरराइड करने के लिए आप एक स्टाइल ऑब्जेक्ट बना सकते हैं और इसे फैला सकते हैं फिर अपनी अतिरिक्त शैली (जैसे { ...baseStyle, fontSize: 16 }) जोड़ सकते हैं

Comments

हो सकता है कि defaultPropsतब मौजूद नहीं था जब अन्य सभी उत्तर लिखे गए थे, लेकिन यह अब ऐसा करने का तरीका है।

— १६

दुर्भाग्य से, यह काम नहीं करेगा यदि हम styleविशेष Textघटकों की शैलियों को

— मोड़ने के

सही है, लेकिन आप इसके चारों ओर काम कर सकते हैं, एक वस्तु के रूप में सामान्य शैली बना सकते हैं और जब भी आप कुछ कस्टम फॉन्ट चाहते हैं बस घटक को एक सरणी में पास करते हैं जिसमें वह ऑब्जेक्ट होता है + yourNewStyleObject @Amerzilla

— AJA

वहां एक समस्या है। यदि कोई व्यक्ति styleपाठ घटक में प्रोप को परिभाषित करता है , तो डिफ़ॉल्ट फ़ॉन्ट को प्रतिस्थापित किया जाएगा।

— बड़ौदा नोएल

यह 2019 है और यह पूरी तरह से काम कर रहा है। बस याद रखें कि एंड्रॉइड में आप फ़ाइल नामों में "-" का उपयोग नहीं कर सकते हैं। अपनी फ़ॉन्ट फ़ाइल नाम को कुछ इस तरह परिभाषित करें जैसे कि font_name.ttf।

— एमआरसफरी

Answer 4

आप पाठ के उपयोग से अपने किसी भी घटक में इसे जोड़कर पाठ व्यवहार को ओवरराइड कर सकते हैं:

let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

संपादित करें: चूंकि प्रतिक्रियाशील मूल निवासी 0.56, Text.prototypeअब काम नहीं कर रहा है। आपको निकालने की आवश्यकता है .prototype:

let oldRender = Text.render;
Text.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

Comments

यह एक महान समाधान है लेकिन आपको बदलना होगा: [Origin.props.style, {color: 'red', fontFamily: 'Arial'}] -> [{color: 'red', fontFamily: 'Arial'}, मूल। props.style] अन्यथा आप घटक में तय की गई कस्टम शैली को ओवरराइड करेंगे

— इकोनिस सिमोन

सबसे अच्छा काम किया। Text.prototype.render अब काम नहीं करता है, Text.render करता है!

— किरा

कैसे एक ही विरासत के प्रतीक से बचने के लिए?

— भीड़ दें

मैं @IaconisSimone के साथ सहमत हूं कि फोंटमिली को सेट करने के लिए सबसे अच्छा तरीका है और कस्टम शैलियों को ओवरराइड नहीं करना है

— dczii

यह जाने का रास्ता है

— विटालो बेनिकियो

Answer 5

जोड़ना

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

में package.json तो चलानेreact-native link

Answer 6

React-Native 0.56 के साथ, बदलने की उपरोक्त विधि Text.prototype.renderअब काम नहीं करती है, इसलिए आपको अपने स्वयं के घटक का उपयोग करना होगा, जिसे एक पंक्ति में किया जा सकता है!

MyText.js

export default props => <Text {...props} style={[{fontFamily: 'Helvetica'}, props.style]}>{props.children}</Text>

AnotherComponent.js

import Text from './MyText';

...
<Text>This will show in default font.</Text>
...

Comments

@FancyJohn यह अब हुक और के साथ होगा useRef। reactjs.org/docs/hooks-reference.html#useref

— क्रिस्टोफर रीड

Answer 7

इस फ़ंक्शन को अपने मूल Appघटक में जोड़ें और फिर इन निर्देशों का उपयोग करके अपने फ़ॉन्ट को जोड़ने के बाद अपने निर्माता से इसे चलाएं। https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

import {Text, TextInput} from 'react-native'

SetDefaultFontFamily = () => {
    let components = [Text, TextInput]

    const customProps = {
        style: {
            fontFamily: "Rubik"
        }
    }

    for(let i = 0; i < components.length; i++) {
        const TextRender = components[i].prototype.render;
        const initialDefaultProps = components[i].prototype.constructor.defaultProps;
        components[i].prototype.constructor.defaultProps = {
            ...initialDefaultProps,
            ...customProps,
        }
        components[i].prototype.render = function render() {
            let oldProps = this.props;
            this.props = { ...this.props, style: [customProps.style, this.props.style] };
            try {
                return TextRender.apply(this, arguments);
            } finally {
                this.props = oldProps;
            }
        };
    }
}

Comments

यह वही है जो मैं देख रहा था, कुछ और स्थापित नहीं करना चाहता था।

— zevy_boy

यदि मेरे App.js में मुख्य रूप से शामिल हैं const App = StackNavigator({...})और export default Appमैं वास्तव में इस कोड को कहां रखूंगा क्योंकि मुझे नहीं लगता कि मैं यहां एक कंस्ट्रक्टर का उपयोग कर सकता हूं?

— kojow7

मैंने अपना खुद का प्रश्न यहाँ जोड़ा है: stackoverflow.com/questions/50081042/…

— kojow7

क्यों घटक पर काम करता है?

— ड्रोर बार

Answer 8

इस धागे के लिए सुपर देर से लेकिन यहाँ जाता है।

TLDR; निम्नलिखित ब्लॉक को अपने में जोड़ेंAppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // HERE: replace "Verlag" with your font
  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

पूरे प्रवाह का चलना।

कुछ तरीकों से आप ऐसा कर सकते हैं एक प्लगइन का उपयोग कर बाहर की तरह react-native-global-propsतो बीमार आप कदम से कदम हालांकि चलना।

प्लेटफार्मों में फोंट जोड़ना।

IOS प्रोजेक्ट में फ़ॉन्ट कैसे जोड़ें

पहले अपनी संपत्ति के लिए एक स्थान बनाएँ। हमारी निर्देशिका में निम्नलिखित निर्देशिका बनाते हैं।

`` `

ios/
static/
       fonts/

`` `

अब हमारे पैकेज में एक "React Native" NPM जोड़ें

  "rnpm": {
    "static": [
   "./static/fonts/"
    ]
  }

अब हम अपनी संपत्ति को अपने मूल ऐप्स में जोड़ने के लिए "प्रतिक्रिया-मूल लिंक" चला सकते हैं।

मैन्युअल रूप से सत्यापित या कर रहा है।

परियोजनाओं में अपना फ़ॉन्ट नाम जोड़ना चाहिए .plist ( code ios/*/Info.plistपुष्टि करने के लिए वीएस कोड उपयोगकर्ताओं के लिए)

यहाँ मान लें Verlagकि आपके द्वारा जोड़ा गया फ़ॉन्ट है, इसे कुछ इस तरह दिखना चाहिए:

     <dict>
   <plist>
      .....
      <key>UIAppFonts</key>
      <array>
         <string>Verlag Bold Italic.otf</string>
         <string>Verlag Book Italic.otf</string>
         <string>Verlag Light.otf</string>
         <string>Verlag XLight Italic.otf</string>
         <string>Verlag XLight.otf</string>
         <string>Verlag-Black.otf</string>
         <string>Verlag-BlackItalic.otf</string>
         <string>Verlag-Bold.otf</string>
         <string>Verlag-Book.otf</string>
         <string>Verlag-LightItalic.otf</string>
      </array>
      ....    
</dict>
</plist>

अब जब आपने उन्हें मैप किया है, तो अब सुनिश्चित करें कि वे वास्तव में वहां हैं और लोड किया जा रहा है (यह भी है कि आप इसे मैन्युअल रूप से कैसे करेंगे)।

जाओ "Build Phase" > "Copy Bundler Resource", अगर यह काम नहीं करता था तो आप मैन्युअल रूप से उनके यहाँ जोड़ देंगे।

फ़ॉन्ट नाम प्राप्त करें (XCode द्वारा मान्यता प्राप्त)

पहले अपने XCode लॉग खोलें, जैसे:

तब आप AppDelegate.mफ़ॉन्ट और फ़ॉन्ट परिवार के नाम लॉग इन करने के लिए अपने ब्लॉक को जोड़ सकते हैं ।

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    .....


  for (NSString* family in [UIFont familyNames])
  {
    NSLog(@"%@", family);
    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
      NSLog(@" %@", name);
    }
  }

  ...
}

एक बार जब आप दौड़ते हैं तो आपको अपने फोंट ढूंढना चाहिए अगर सही ढंग से लोड किया गया है, तो यहां हमें इस तरह से लॉग में मिला है:

2018-05-07 10:57:04.194127-0700 MyApp[84024:1486266] Verlag
2018-05-07 10:57:04.194266-0700 MyApp[84024:1486266]  Verlag-Book
2018-05-07 10:57:04.194401-0700 MyApp[84024:1486266]  Verlag-BlackItalic
2018-05-07 10:57:04.194516-0700 MyApp[84024:1486266]  Verlag-BoldItalic
2018-05-07 10:57:04.194616-0700 MyApp[84024:1486266]  Verlag-XLight
2018-05-07 10:57:04.194737-0700 MyApp[84024:1486266]  Verlag-Bold
2018-05-07 10:57:04.194833-0700 MyApp[84024:1486266]  Verlag-Black
2018-05-07 10:57:04.194942-0700 MyApp[84024:1486266]  Verlag-XLightItalic
2018-05-07 10:57:04.195170-0700 MyApp[84024:1486266]  Verlag-LightItalic
2018-05-07 10:57:04.195327-0700 MyApp[84024:1486266]  Verlag-BookItalic
2018-05-07 10:57:04.195510-0700 MyApp[84024:1486266]  Verlag-Light

तो अब हम जानते हैं कि यह Verlagपरिवार को लोड करता है और उस परिवार के अंदर के फोंट हैं

• Verlag-Book
• Verlag-BlackItalic
• Verlag-BoldItalic
• Verlag-XLight
• Verlag-Bold
• Verlag-Black
• Verlag-XLightItalic
• Verlag-LightItalic
• Verlag-BookItalic
• Verlag-Light

ये अब मामले संवेदनशील नाम हैं जिन्हें हम अपने फ़ॉन्ट परिवार में उपयोग कर सकते हैं हम अपनी प्रतिक्रिया देशी ऐप में उपयोग कर सकते हैं।

अब मुझे डिफ़ॉल्ट फ़ॉन्ट सेट करना है।

फिर अपने फ़ॉन्ट परिवार का नाम AppDelegate.mइस पंक्ति के साथ जोड़ने के लिए एक डिफ़ॉल्ट फ़ॉन्ट सेट करें

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // ADD THIS LINE (replace "Verlag" with your font)

  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

किया हुआ।

Comments

सबसे अच्छा दृष्टिकोण, लेकिन काम नहीं कर रहा है, आरएन 0.57 के लास अपडेट से संबंधित कुछ भी?

— user2976753

Answer 9

Package.json में सेट करें

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

और प्रतिक्रिया-मूल लिंक लिंक करें

Answer 10

यह मेरे लिए काम करता है: रिवाज मूल में कस्टम फ़ॉन्ट जोड़ें

अपने फॉन्ट डाउनलोड करें और उन्हें एसेट्स / फोंट फ़ोल्डर में रखें, इस लाइन को package.json में जोड़ें

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

तब टर्मिनल खोलें और इस कमांड को चलाएं: प्रतिक्रिया-देशी लिंक

अब आपका जाना अच्छा है। अधिक विस्तृत कदम के लिए। ऊपर दिए गए लिंक पर जाएँ