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

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

Das manuelle Anwenden auf jeden Textknoten scheint zu kompliziert.

Die empfohlene Methode besteht darin, eine eigene Komponente wie MyAppText zu erstellen. MyAppText ist eine einfache Komponente, die eine Textkomponente mit Ihrem universellen Stil rendert und andere Requisiten usw. passieren kann.

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

Es gab vor kurzem ein Knotenmodul, das diese löst dieses Problem gemacht wurde , so dass Sie nicht haben , um eine weitere Komponente zu erstellen .

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

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

In der Dokumentation heißt es, dass Sie die setCustomTextFunktion in Ihrer Komponente höchster Ordnung wie folgt importieren .

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

Erstellen Sie dann das gewünschte benutzerdefinierte Styling / Requisiten für die reaktionsnative TextKomponente. In Ihrem Fall möchten Sie, dass fontFamily an jeder TextKomponente arbeitet.

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

Rufen Sie die setCustomTextFunktion auf und übergeben Sie Ihre Requisiten / Stile an die Funktion.

setCustomText(customTextProps);

Und dann haben alle reaktionsnativenText Komponenten Ihre deklarierte fontFamily zusammen mit allen anderen Requisiten / Stilen, die Sie bereitstellen.

Überprüfen Sie für React Native 0.56.0+ zuerst, ob defaultProps definiert ist:

Text.defaultProps = Text.defaultProps || {}

Dann füge hinzu:

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

Fügen Sie das Obige im Konstruktor der Datei App.js (oder einer beliebigen Stammkomponente) hinzu.

Um den Stil zu überschreiben , können Sie ein Style - Objekt erstellen und verbreiten es Ihre zusätzlichen Stil fügen Sie dann (zB { ...baseStyle, fontSize: 16 })

Sie können das Textverhalten überschreiben, indem Sie es mit Text in eine beliebige Komponente einfügen:

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

Bearbeiten: Text.prototypefunktioniert seit React Native 0.56 nicht mehr. Sie müssen Folgendes entfernen .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]
    });
};

Hinzufügen

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

in package.json dann laufenreact-native link

Mit React-Native 0.56 Text.prototype.renderfunktioniert die oben beschriebene Änderungsmethode nicht mehr. Sie müssen also Ihre eigene Komponente verwenden, was in einer Zeile erfolgen kann!

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

Fügen Sie diese Funktion Ihrer Stammkomponente hinzu Appund führen Sie sie dann von 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;
            }
        };
    }
}

Super spät zu diesem Thread aber hier geht.

TLDR; Fügen Sie den folgenden Block in IhreAppDelegate.m

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

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

Walkthrough des gesamten Flusses.

Ein paar Möglichkeiten, wie Sie dies außerhalb der Verwendung eines Plugins wie tun können react-native-global-props Sie Schritt für Schritt durch.

Hinzufügen von Schriftarten zu Plattformen.

So fügen Sie die Schriftart zum IOS-Projekt hinzu

Lassen Sie uns zunächst einen Standort für unser Vermögen erstellen. Lassen Sie uns das folgende Verzeichnis in unserem Stammverzeichnis erstellen.

`` `

ios/
static/
       fonts/

`` `

Fügen wir nun ein "React Native" -NPM in unser package.json ein

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

Jetzt können wir "React-Native Link" ausführen, um unsere Assets zu unseren nativen Apps hinzuzufügen.

Überprüfen oder manuell ausführen.

Das sollte Ihre Schriftnamen in die Projekte .plist einfügen (für VS-Code-Benutzer ausführencode ios/*/Info.plist zur Bestätigung )

Nehmen wir hier an, es Verlaghandelt sich um die Schriftart, die Sie hinzugefügt haben. Sie sollte ungefähr so ​​aussehen:

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

Nachdem Sie sie zugeordnet haben, stellen wir sicher, dass sie tatsächlich vorhanden sind und geladen werden (so würden Sie es auch manuell machen).

Gehen Sie zu "Build Phase" > "Copy Bundler Resource", Wenn es nicht funktioniert hat, fügen Sie hier manuell ein.

Schriftarten abrufen (von XCode erkannt)

Öffnen Sie zuerst Ihre XCode-Protokolle wie folgt:

Anschließend können Sie den folgenden Block hinzufügen AppDelegate.m, um die Namen der Schriftarten und der Schriftfamilie zu protokollieren.

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


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

  ...
}

Sobald Sie ausgeführt haben, sollten Sie Ihre Schriftarten finden, wenn sie korrekt geladen wurden. Hier haben wir unsere in folgenden Protokollen gefunden:

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

Jetzt wissen wir also, dass es die VerlagFamilie geladen hat und die Schriftarten innerhalb dieser Familie sind

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

Dies sind jetzt die Namen, bei denen zwischen Groß- und Kleinschreibung unterschieden wird und die wir in unserer Schriftfamilie verwenden können, die wir in unserer reaktionsfähigen nativen App verwenden können.

Got -'em setzt jetzt die Standardschriftart.

Legen Sie dann eine Standardschrift fest, um Ihren Schriftfamiliennamen AppDelegate.mmit dieser Zeile in Ihre einzufügen

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

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

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

Getan.

In package.json einstellen

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

Und Link React-Native Link

Das ist für mich in Ordnung: Benutzerdefinierte Schriftart in React Native hinzufügen

Laden Sie Ihre Schriftarten herunter und legen Sie sie im Ordner Assets / Fonts ab. Fügen Sie diese Zeile in package.json hinzu

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

Öffnen Sie dann das Terminal und führen Sie diesen Befehl aus: react-native link

Jetzt können Sie loslegen. Für einen detaillierteren Schritt. Besuchen Sie den oben genannten Link