React Native'de varsayılan yazı tipi ailesi nasıl ayarlanır?

100

React Native'deki bu CSS'nin bir eşdeğeri var mı, böylece uygulama her yerde aynı yazı tipini kullanıyor?

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

Bunu her Metin düğümüne manuel olarak uygulamak aşırı derecede karmaşık görünüyor.

react-native 
— Dagobert Renouf
kaynak
1
Bu Soruya Mükemmel Bir Cevabınız Var ??? Herhangi bir style.text ya da onun gibi bir şey demek istemiyorum.
— MD Ashik

Yanıtlar:

70

Önerilen yol, MyAppText gibi kendi bileşeninizi oluşturmaktır. MyAppText, evrensel stilinizi kullanarak bir Metin bileşeni oluşturan ve diğer sahne öğelerinden vb. Geçebilen basit bir bileşen olacaktır.

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

— David E. Chen
kaynak
2
Teşekkürler tam da ihtiyacım olan şey. Görünüşe göre bileşen yaklaşımını yeterince derinlemesine kavramamışım :)
— Dagobert Renouf
2
Belgelerden çok net olmayan bir şey, bileşeninizdeki özellikleri nasıl geçireceğiniz ve bileşeninizdeki stillere nasıl saygı göstereceğinizdir. Bunu şöyle yapabilirsiniz: gist.github.com/neilsarkar/c9b5fc7e67bbbe4c407eec17deb7311e
— Neil Sarkar
1
@NeilSarkar Bu temel örnekteki bir sorun, stilin yapıcıda üretilmesidir. Sonuç olarak, stil pervanesi değişirse, yeniden oluşturmasını istersiniz, ancak bu durumda olmayacaktır. render()Yapıcı yerine ele alınmalıdır . useMemoVerimlilik önemliyse kancaların kullanılması da yardımcı olabilir. Alternatif olarak, yapıcıda tutmak istiyorsanız, bir stil pervanesi değişmesi nedeniyle bileşen güncellendiğinde componentDidUpdategüncellenen bir mantık eklemek önemlidir this.style.
— Fernando Rojo
iyi nokta, teşekkürler! Görünüşe göre birisi render yöntemindeki stilleri birleştiren (kendi durumunda saf bir bileşenin) özüne yeniden düzenlenmiş bir sürüm eklemiş gibi görünüyor
— Neil Sarkar
59

Bunu bu sorunun olduğunu çözer yapıldığı bir düğüm modülü son zamanlarda vardı yok zorunda başka bileşeni oluşturun .

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

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

Belgeler, en yüksek dereceden bileşeninizde, setCustomTextişlevi bu şekilde içe aktaracağınızı belirtir .

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

Ardından, react-native Textbileşen için istediğiniz özel stilleri / dekorları oluşturun. Sizin durumunuzda, fontFamily'nin her Textbileşen üzerinde çalışmasını istersiniz .

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

setCustomTextİşlevi çağırın ve sahne / stillerinizi işleve aktarın.

setCustomText(customTextProps);

Ve sonra tüm react-native Textbileşenlerinde, sağladığınız diğer sahne / stillerle birlikte bildirilen fontFamily bulunur.

— Ajackster
kaynak
Bileşen bileşimini kullanmanın deyimsel yöntemi daha iyi bir seçim gibi görünüyor, ancak bu harika bir hack.
— Daniel Little
Metin bileşeni varsayılan yazı tiplerinin kutudan çıkarılmasını desteklemediğinde, bu çözüm çok daha iyi hale gelir. Gerçek yerel uygulamaların sağladığı her ayrıntı için bir sarmalayıcı bileşeni yapmaktansa, tek bir yerde global bir kontrol eklemeyi ve yerel bileşenleri kullanmayı tercih ederim.
— mienaikoe
Yukarıdaki 2 çözüm arasında tereddüt ettim, aslında resmi olmayan eklentileri yüklemekten nefret ediyorum çünkü react-native kendisinin değişmeye devam etmesine neden oluyor, ancak sonunda bunu seçiyorum çünkü bana gerçekten çok fazla zaman kazandırabilir. Teşekkürler!
— Zhang Buzz
Yani aramam gerekiyor mu <Text style={styles.text}>? body {font-family: 'Open Sans';} Herhangi bir güncelleme çözümü varmış gibi mükemmel bir çözüm değil mi?
— MD Ashik
1
Hayır yapmana gerek yok Text style={styles.text}>. Özel proplarınızı uygulamanızda bir yerde beyan etmeniz yeterlidir ve tüm Metin bileşenlerinize uygulanacaktır. Bu çok benzerbody {font-family: ....}
— Ajackster
32

React Native 0.56.0+ için önce defaultProps tanımlanıp tanımlanmadığını kontrol edin:

Text.defaultProps = Text.defaultProps || {}

Sonra Ekle: 

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

Yukarıdakileri, App.js dosyasının (veya sahip olduğunuz herhangi bir kök bileşeninin) yapıcısına ekleyin.

Stili geçersiz kılmak için bir stil nesnesi oluşturabilir ve onu yayabilir, ardından ek stilinizi ekleyebilirsiniz (örn. { ...baseStyle, fontSize: 16 })

— AJA
kaynak
4
Belki defaultPropsdiğer tüm cevaplar yazılırken yoktu ama şimdi bunu yapmanın yolu bu gibi görünüyor.
— freeall
4
Ne yazık ki, iş biz geçersiz kılmaz eğer stylepervane, diyelim ki, özellikle stillerini çimdik Textbileşenler
— Amerzilla
Doğru ama bunun üzerinde çalışabilir, ortak stili bir nesne olarak yaratabilir ve ne zaman bir özel yazı tipini istediğinizde, bileşene bu nesneyi içeren bir diziyi iletebilirsiniz + yourNewStyleObject @Amerzilla
— AJA
1
Orada bir sorun var. Daha sonra birisi styleMetin bileşeninde pervaneyi tanımlarsa, varsayılan yazı tipi değiştirilecektir.
— Broda Noel
3
2019 ve mükemmel çalışıyor. Android'de dosya adlarında "-" kullanamayacağınızı unutmayın. font dosyası adlarınızı font_name.ttf gibi tanımlayın.
— MRSafari
24

Metin'i kullanarak herhangi bir bileşeninize bunu ekleyerek Metin davranışını geçersiz kılabilirsiniz:

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]
    });
};

Düzenleme: React Native 0.56'dan beri Text.prototypeartık çalışmıyor. Kaldırmanız gerekenler .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]
    });
};
— Floris M
kaynak
4
Bu harika bir çözüm ama değiştirmelisiniz: [origin.props.style, {color: 'red', fontFamily: 'Arial'}] -> [{color: 'red', fontFamily: 'Arial'}, orijin. props.style] Aksi takdirde, bileşende
— ayarlanan
1
En iyi şekilde çalıştı. Text.prototype.render artık çalışmıyor, Text.render çalışıyor!
— Kira
1
simgelerin aynısını devralması nasıl önlenir?
— Venkat
1
FontFamily'i ayarlamak ve özel stilleri geçersiz kılmamak için @IaconisSimone Best yaklaşımına katılıyorum
— dczii
1
— Gitmenin
14

React-Native 0.56 ile, yukarıdaki değiştirme yöntemi Text.prototype.renderartık çalışmaz, bu nedenle tek satırda yapılabilen kendi bileşeninizi kullanmanız gerekir!

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>
...
— anni
kaynak
@FancyJohn Şimdi kancalarla olacak ve useRef. reactjs.org/docs/hooks-reference.html#useref
— Christopher Reid
11

Bu işlevi kök Appbileşeninize ekleyin ve ardından bu talimatları kullanarak yazı tipinizi ekledikten sonra kurucunuzdan çalıştırın. 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;
            }
        };
    }
}
— Rob
kaynak
Bu tam olarak aradığım şeydi, daha fazla bir şey yüklemek istemedim.
— zevy_boy
App.js'm esas olarak oluşursa const App = StackNavigator({...})ve export default Appburada bir kurucu kullanabileceğimi düşünmediğim için bu kodu tam olarak nereye yerleştirirdim?
— kojow7
Buraya kendi sorumu ekledim: stackoverflow.com/questions/50081042/…
— kojow7
Neden componentDidMount üzerinden yapıcı?
— Dror Bar
2

Bu konuya çok geç ama işte başlıyor.

TLDR; Aşağıdaki bloğu ekleyinAppDelegate.m

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

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

Tüm akışın izlenecek yolu.

Bunu bir eklenti kullanmanın dışında yapmanın birkaç yolu, size react-native-global-propsadım adım yine de yürüyeceğim.

Platformlara yazı tipi eklemek.

Yazı tipi IOS projesine nasıl eklenir

Öncelikle varlıklarımız için bir konum oluşturalım. Aşağıdaki dizini kökümüzde yapalım.

''

ios/
static/
       fonts/

''

Şimdi package.json'a bir "React Native" NPM ekleyelim

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

Artık varlıklarımızı yerel uygulamalarımıza eklemek için "react-native link" çalıştırabiliriz.

Manuel olarak doğrulamak veya yapmak.

Bu, yazı tipi adlarınızı projelere eklemelidir .plist (VS kodu için kullanıcılar code ios/*/Info.plistonaylamak için çalışır)

Burada Verlag, eklediğiniz yazı tipinin şöyle görünmesi gerektiğini varsayalım :

     <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>

Şimdi onları eşleştirdiğinize göre, şimdi onların gerçekten orada olduklarından ve yüklendiklerinden emin olalım (bu aynı zamanda manuel olarak nasıl yapacağınızdır).

Git "Build Phase" > "Copy Bundler Resource", işe yaramadıysa, burada altlarına manuel olarak ekleyeceksiniz.

1_uuz0__3kx2vvguz37bhvya

Yazı Tipi Adlarını Alın (XCode tarafından tanınır)

Önce XCode günlüklerinizi açın, örneğin:

XXXX

Ardından AppDelegate.mYazı Tiplerinin ve Yazı Tipi Ailesinin adlarını günlüğe kaydetmek için aşağıdaki bloğu ekleyebilirsiniz .

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


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

  ...
}

Çalıştırdıktan sonra, yazı tiplerinizi doğru yüklenmişse bulmalısınız, burada bizimkileri aşağıdaki gibi günlüklerde bulduk:

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

Artık Verlagaileyi yüklediğini biliyoruz ve bu ailenin içindeki yazı tipleri

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

Bunlar artık, react native uygulamamızda kullanabileceğimiz font ailemizde kullanabileceğimiz büyük / küçük harfe duyarlı adlardır.

Got -'em artık varsayılan yazı tipini ayarladı.

Ardından, yazı tipi aile adınızı AppDelegate.mbu satıra eklemek için varsayılan bir yazı tipi ayarlamak için 

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

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

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

Bitti.

— Garrettmac
kaynak
En iyi yaklaşım, ancak işe yaramıyor, RN 0.57'nin las güncellemesiyle ilgili herhangi bir şey var mı?
— user2976753
1

Bu benim için çalışıyor: React Native'de Özel Yazı Tipi Ekle

yazı tiplerinizi indirin ve bunları assets / fonts klasörüne yerleştirin, bu satırı package.json içine ekleyin 

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

ardından terminali açın ve şu komutu çalıştırın: react-native link

Şimdi gitmekte fayda var. Daha ayrıntılı adım için. yukarıda belirtilen bağlantıyı ziyaret edin

— Khushboo Tahir
kaynak
1

Ekle

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

içinde package.json sonra çalıştırınreact-native link

— Sanjib Suna
kaynak
1

Package.json içinde ayarlanır

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

Ve link react-native link

— amin mohammadi
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.