Apakah ada yang setara dengan CSS ini di React Native, sehingga aplikasi menggunakan font yang sama di mana-mana?

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

Menerapkannya secara manual pada setiap node Teks tampaknya terlalu rumit.

Cara yang direkomendasikan adalah membuat komponen Anda sendiri, seperti MyAppText. MyAppText akan menjadi komponen sederhana yang membuat komponen Teks menggunakan gaya universal Anda dan dapat melewati props lain, dll.

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

Baru-baru ini ada modul node yang dibuat yang memecahkan masalah ini sehingga Anda tidak perlu membuat komponen lain .

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

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

Dokumentasi menyatakan bahwa dalam komponen urutan tertinggi Anda, impor setCustomTextfungsi seperti itu.

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

Kemudian, buat styling / props khusus yang Anda inginkan untuk komponen react-native Text. Dalam kasus Anda, Anda ingin fontFamily bekerja pada setiap Textkomponen.

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

Panggil setCustomTextfungsi dan berikan properti / gaya Anda ke dalam fungsi.

setCustomText(customTextProps);

Dan kemudian semua Textkomponen react-native akan memiliki fontFamily yang dideklarasikan bersama dengan props / styles lain yang Anda sediakan.

Untuk React Native 0.56.0+, periksa apakah defaultProps ditentukan terlebih dahulu:

Text.defaultProps = Text.defaultProps || {}

Kemudian tambahkan:

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

Tambahkan yang di atas dalam konstruktor file App.js (atau komponen root apa pun yang Anda miliki).

Untuk menimpa gaya, Anda dapat membuat objek gaya dan menyebarkannya kemudian menambahkan gaya tambahan Anda (mis. { ...baseStyle, fontSize: 16 })

Anda dapat mengganti perilaku Teks dengan menambahkan ini di salah satu komponen Anda menggunakan Teks:

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

Edit: sejak React Native 0.56, Text.prototypetidak berfungsi lagi. Anda perlu menghapus .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]
    });
};

Dengan React-Native 0.56, metode pengubahan di atas Text.prototype.rendertidak berfungsi lagi, jadi Anda harus menggunakan komponen Anda sendiri, yang bisa dilakukan dalam satu baris!

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

Tambahkan fungsi ini ke Appkomponen root Anda dan kemudian jalankan dari konstruktor Anda setelah menambahkan font Anda menggunakan petunjuk ini. 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;
            }
        };
    }
}

Sangat terlambat untuk utas ini tapi ini dia.

TLDR; Tambahkan blok berikut diAppDelegate.m

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

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

Walkthrough dari seluruh aliran.

Beberapa cara Anda dapat melakukan ini di luar menggunakan plugin seperti react-native-global-propsitu saya akan memandu Anda langkah demi langkah.

Menambahkan font ke platform.

Bagaimana cara menambahkan font ke proyek IOS

Pertama, mari buat lokasi untuk aset kita. Mari buat direktori berikut di root kita.

``

ios/
static/
       fonts/

``

Sekarang mari tambahkan NPM "React Native" di package.json kita

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

Sekarang kita dapat menjalankan "react-native link" untuk menambahkan aset kita ke aplikasi asli kita.

Memverifikasi atau melakukan secara manual.

Itu harus menambahkan nama font Anda ke dalam proyek .plist (untuk pengguna kode VS menjalankan code ios/*/Info.plistuntuk mengonfirmasi)

Di sini anggap Verlagsaja font yang Anda tambahkan, seharusnya terlihat seperti ini:

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

Sekarang Anda telah memetakannya, sekarang mari pastikan mereka benar-benar ada dan dimuat (ini juga cara Anda melakukannya secara manual).

Pergi ke "Build Phase" > "Copy Bundler Resource", Jika tidak berhasil, Anda akan menambahkannya secara manual di sini.

Dapatkan Nama Font (dikenali oleh XCode)

Pertama buka log XCode Anda, seperti:

Kemudian Anda dapat menambahkan blok berikut AppDelegate.mke dalam log nama Font dan Keluarga Font.

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


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

  ...
}

Setelah Anda menjalankan Anda akan menemukan font Anda jika dimuat dengan benar, di sini kami menemukan font kami di log seperti ini:

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

Jadi sekarang kita tahu itu memuat Verlagkeluarga dan merupakan font di dalam keluarga itu

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

Ini sekarang adalah nama case sensitive yang dapat kita gunakan dalam keluarga font kita yang dapat kita gunakan di aplikasi react native kita.

Got -'em sekarang mengatur font default.

Kemudian untuk mengatur font default untuk menambahkan nama keluarga font Anda AppDelegate.mdengan baris ini

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

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

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

Selesai.

Itu berhasil untuk saya: Tambahkan Font Kustom di React Native

unduh font Anda dan letakkan di folder aset / font, tambahkan baris ini di package.json

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

kemudian buka terminal dan jalankan perintah ini: react-native link

Sekarang Anda siap untuk pergi. Untuk langkah yang lebih detail. kunjungi tautan yang disebutkan di atas

Menambahkan

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

di package.json kemudian jalankanreact-native link

Setel di package.json

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

Dan link react-native link