Wie Standard-Schriftfamilie in React Native festlegen?

Question

Gibt es in React Native ein Äquivalent zu diesem CSS, sodass die App überall dieselbe Schriftart verwendet?

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

Anwenden manuell auf jedem Text-Knoten scheint übermäßig kompliziert.

Answer 1

Die empfohlene Methode besteht darin, eine eigene Komponente wie MyAppText zu erstellen. MyAppText wäre eine einfache Komponente, die eine Textkomponente mit Ihrem Universal-Stil macht und durch andere Requisiten passieren kann, usw.

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

Answer 2

kürzlich ein Knotenmodul war, die gemacht wurde, das dieses Problem, so dass Sie don löst 't müssen eine andere Komponente erstellen.

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

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

Die Dokumentation besagt, dass die wie so setCustomText Funktion in höchstem Niveau Komponente importieren.

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

Erstellen Sie dann die benutzerdefinierten Styling/Requisiten Sie für die reagieren-native Text Komponente wollen. In Ihrem Fall möchten Sie fontFamily auf jeder Komponente arbeiten.

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

Rufen Sie die setCustomText Funktion und Ihre Requisiten/Stile in die Funktion übergeben.

setCustomText(customTextProps); 

Und dann reagieren-native Text Komponenten Ihre erklärt family zusammen mit anderen Requisiten/Stile, die Sie bieten haben werden.

Answer 3

können Sie Text Verhalten außer Kraft setzen, indem diese in einem Ihrer Komponente das Hinzufügen von Text mit:

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

Answer 4

hinzufügen Text.defaultProps.style = { fontFamily: 'some-font' } im Konstruktor der App.js-Datei (oder jede Wurzelkomponente Sie haben).

Answer 5

Fügen Sie diese Funktion zu Ihrer Root-Komponente App hinzu und führen Sie sie dann aus Ihrem Konstruktor aus, nachdem Sie Ihre Schriftart mithilfe dieser Anweisungen hinzugefügt haben. 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; 
      } 
     }; 
    } 
}