react-native
Benutzerdefinierte Schriftarten

Schritte zum Verwenden benutzerdefinierter Schriftarten in React Native (Android)

1. Fügen Sie Ihre android/app/src/main/assets/fonts/font_name.ttf in android/app/src/main/assets/fonts/font_name.ttf
2. Kompilieren Sie die Android-App neu, indem Sie den react-native run-android
3. Jetzt können Sie fontFamily: 'font_name' in Ihren React Native Styles verwenden

Schritte zum Verwenden benutzerdefinierter Schriftarten in React Native (iOS)

1. Fügen Sie die Schriftart in Ihr Xcode-Projekt ein.

2. Stellen Sie sicher, dass sie in der Spalte Zielmitgliedschaft enthalten sind

Klicken Sie im Navigator auf die Schrift und prüfen Sie, ob die Schrift enthalten ist.

3. Prüfen Sie, ob die Schriftart in Ihrem Bundle als Ressource enthalten ist

Klicken Sie auf Ihre Xcode-Projektdatei, und wählen Sie "Build-Phasen" aus. Wählen Sie "Bundle-Ressourcen kopieren".

4. Fügen Sie die Schriftart in Application Plist (Info.plist) ein.

Öffnen Sie Info.plist im Hauptordner der Anwendung, klicken Sie auf "Information Property List" und anschließend auf das Pluszeichen (+). Wählen Sie in der Dropdown-Liste "Von der Anwendung bereitgestellte Schriftarten".

5. Fügen Sie den Schriftnamen in den von der Anwendung bereitgestellten Schriftarten hinzu

Erweitern Sie Schriftarten, die von Anwendung bereitgestellt werden, und fügen Sie den Spaltennamen genau der Wertspalte hinzu

6. Verwenden Sie es in der Anwendung

    <Text style={{fontFamily:'IndieFlower'}}>
      Welcome to React Native!
    </Text>
   

Benutzerdefinierte Schriftarten für Android und IOS

• Erstellen Sie einen Ordner in Ihrem Projektordner und fügen Sie Ihre Schriftarten hinzu. Beispiel:

  • Beispiel: Hier haben wir einen Ordner mit dem Namen "mystuff" und dann "fonts" hinzugefügt, in den wir unsere Fonts eingefügt haben:
    • 

• Fügen Sie den folgenden Code in package.json .

  {
      ...
  
      "rnpm": {
          "assets": [
            "path/to/fontfolder"
          ]
      },
  
      ...
  }
  

  • Für das obige Beispiel hätte unser package.json jetzt einen Pfad "mystuff / fonts":

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

• Führen Sie den Befehl " react-native link .

• Verwenden Sie benutzerdefinierte Schriftarten für das Projekt unterhalb des Codes

  <Text style={{ fontFamily: 'FONT-NAME' }}>
      My Text
  </Text>
  

  Dabei ist FONT-NAME die spezifische Plattform-Präfix.

  Android

  FONT-NAME sind die Wörter vor der Erweiterung in der Datei. Beispiel: Der Dateiname Ihrer Schriftart lautet Roboto-Regular.ttf , sodass Sie fontFamily: Roboto-Regular .

  iOS

  FONT-NAME ist "Full Name", wenn Sie mit der rechten Maustaste auf die Schriftartdatei klicken und dann auf "Informationen anfordern" klicken. (Quelle: https://stackoverflow.com/a/16788493/2529614 ), in der Abbildung unten lautet der Dateiname MM Proxima Nova Ultra bold.otf , jedoch ist "Full Name" "Proxima Nova Semibold", also würden Sie dies tun set fontFamily: Proxima Nova Semibold . Bildschirmfoto -

• Reaktives react-native run-ios oder react-native run-android erneut react-native run-android (dies wird mit den Ressourcen neu kompiliert)