Bagaimana cara mengatur keluarga font default di React Native?

100

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.

react-native Dagobert Renouf
sumber
1
Punya Jawaban Sempurna untuk Pertanyaan Ini ??? Saya tidak ingin menyebut styles.text apa pun atau semacamnya.
MD Ashik

Jawaban:

70

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

David E. Chen
sumber
2
Terima kasih, itulah yang saya butuhkan. Sepertinya saya belum memahami pendekatan komponen cukup dalam :)
Dagobert Renouf
2
Satu hal yang tidak terlalu jelas dari dokumen adalah bagaimana melewati properti di komponen Anda dan menghormati gaya di komponen Anda. Anda dapat melakukannya seperti ini: gist.github.com/neilsarkar/c9b5fc7e67bbbe4c407eec17deb7311e
Neil Sarkar
1
@NeilSarkar Satu masalah dengan contoh intinya adalah gaya yang dihasilkan di konstruktor. Akibatnya, jika prop gaya berubah, Anda ingin merender ulang, tetapi dalam kasus ini tidak. Ini harus ditangani render()sebagai pengganti konstruktor. Menggunakan pengait useMemojuga dapat membantu jika efisiensi itu penting. Alternatifnya, jika Anda ingin menyimpannya di konstruktor, penting untuk menambahkan componentDidUpdatelogika yang diperbarui this.stylesaat komponen diperbarui karena gaya prop berubah.
Fernando Rojo
poin bagus, terima kasih! Sepertinya seseorang menambahkan versi refactored ke intinya juga yang menggabungkan gaya dalam metode render (dari komponen murni, dalam kasus mereka)
Neil Sarkar
59

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.

Ajackster
sumber
Metode idiomatik untuk menggunakan komposisi komponen sepertinya merupakan pilihan yang lebih baik, meskipun ini adalah cara yang keren.
Daniel Little
Ketika komponen Teks tidak mendukung perubahan font default di luar kotak, solusi ini menjadi jauh lebih baik. Saya lebih suka menambahkan kontrol global di satu tempat dan menggunakan komponen asli daripada membuat komponen pembungkus untuk setiap detail yang disediakan oleh aplikasi asli yang sebenarnya.
mienaikoe
Saya ragu-ragu antara 2 solusi di atas, sebenarnya saya benci memasang plugin tidak resmi karena react-native itu sendiri terus berubah, tetapi akhirnya saya memilih yang ini karena itu benar-benar dapat menghemat banyak waktu saya. Terima kasih!
Zhang Buzz
JADI saya perlu menelepon <Text style={styles.text}>?? Ini bukan solusi sempurna seperti itu body {font-family: 'Open Sans';} punya solusi pembaruan ??
MD Ashik
1
Tidak, Anda tidak perlu melakukannya Text style={styles.text}>. Anda hanya perlu mendeklarasikan props kustom Anda di suatu tempat di aplikasi Anda dan itu akan diterapkan ke semua komponen Text Anda. Ini sangat mirip denganbody {font-family: ....}
Ajackster
32

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

AJA
sumber
4
Mungkin defaultPropstidak ada ketika semua jawaban lain ditulis tetapi tampaknya inilah cara untuk melakukannya sekarang.
freeall
4
Sayangnya, ini tidak akan berfungsi jika kita mengganti styleprop, katakanlah, untuk mengubah gaya Textkomponen tertentu
Amerzilla
Benar tetapi Anda dapat mengatasinya, buat gaya umum sebagai objek dan kapan pun Anda menginginkan beberapa font khusus, cukup berikan ke komponen sebuah array yang berisi objek itu + yourNewStyleObject @Amerzilla
AJA
1
Ada masalah disana. Jika seseorang kemudian mendefinisikan styleprop dalam komponen Text, font default akan diganti.
Broda Noel
3
ini tahun 2019 dan bekerja dengan sempurna. ingat saja di android Anda tidak dapat menggunakan "-" dalam nama file. tentukan nama file font Anda seperti font_name.ttf.
MRSafari
24

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]
    });
};
Floris M
sumber
4
Itu solusi yang bagus tetapi Anda harus mengubah: [origin.props.style, {color: 'red', fontFamily: 'Arial'}] -> [{color: 'red', fontFamily: 'Arial'}, origin. props.style] Jika tidak, Anda akan mengganti gaya kustom yang
ditetapkan
1
Bekerja paling baik. Text.prototype.render tidak berfungsi lagi, Text.render berfungsi!
Kira
1
bagaimana cara menghindari ikon yang mewarisi hal yang sama?
Venkat
1
Saya setuju dengan @IaconisSimone Pendekatan terbaik untuk mengatur fontFamily dan pastikan untuk tidak menimpa gaya kustom
dczii
1
Ini adalah cara untuk pergi
Witalo Benicio
14

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>
...
anni
sumber
@FancyJohn Sekarang akan dengan hook dan useRef. reactjs.org/docs/hooks-reference.html#useref
Christopher Reid
11

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;
            }
        };
    }
}
rampok
sumber
Ini persis seperti yang saya cari, tidak ingin menginstal apa pun lagi.
zevy_boy
Jika App.js saya sebagian besar terdiri dari const App = StackNavigator({...})dan di export default Appmana tepatnya saya akan menempatkan kode ini karena saya rasa saya tidak dapat menggunakan konstruktor di sini?
kojow7
Saya telah menambahkan pertanyaan saya sendiri di sini: stackoverflow.com/questions/50081042/…
kojow7
Mengapa konstruktor menggunakan componentDidMount?
Dror Bar
2

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.

1_uuz0__3kx2vvguz37bhvya

Dapatkan Nama Font (dikenali oleh XCode)

Pertama buka log XCode Anda, seperti:

XXXX

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.

garrettmac
sumber
Pendekatan terbaik, tetapi tidak berhasil, apa pun yang terkait dengan pembaruan terakhir RN 0,57?
pengguna2976753
1

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

Khushboo Tahir
sumber
1

Menambahkan

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

di package.json kemudian jalankanreact-native link

Sanjib Suna
sumber
1

Setel di package.json

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

Dan link react-native link

amin mohammadi
sumber