react native custom fonts

React-Native-Custom-FONTS

Verwenden Sie dynamische Schriftarten über einen Netzwerkstandort, anstatt sie in Ihren nativen Builds zu verwalten!

Erste Schritte

> = 0,60,0

yarn add react-native-custom-fonts # or npm install --save react-native-custom-fonts

Dann bauen Sie Ihre App neu auf. Achten Sie auf iOS, um Ihre Cocoapods im Verzeichnis Ihrer App /ios zu pod install .

<= 0,59.x

Mit yarn :

yarn add react-native-custom-fonts
react-native link react-native-custom-fonts

Veränderungen brechen

• <1.2.0
  • Wir haben eine Reihe von Stabilitätsverbesserungen hinzugefügt und in eine neue API auf Hooks-basierten Migrationen gewandert.
  • Die fontFaces Array -Requisite wurde in ein fontFaces -Objekt verwandelt, dessen Schlüssel die Namen von Schriftstilen sind, auf die Sie in Ihrer App verweisen möchten.
  • Um eine fontFace zu verwenden, müssen Sie den Namen in einem Anruf bei useCustomFont(name:String) angeben.

✍️ Beispiel

Bitte lesen Sie das Beispielprojekt für eine vollständige Demonstration. Nur cd in das Verzeichnis, verwenden Sie npm oder yarn , um die Abhängigkeiten zu installieren, und führen Sie die App mit den folgenden Aussagen aus:

react-native run-android # run on android
react-native run-ios     # run on ios

Einfach

 import React from "react" ;
import PropTypes from "prop-types" ;
import { View , Text } from "react-native" ;
import CustomFontsProvider , { useCustomFont } from "react-native-custom-fonts" ;

const fontFaces = {
  // XXX: Specify the local name of your font. You'll use this to refer to it via the useCustomFont hook.
  'UbuntuBold' : {
    uri : 'https://github.com/google/fonts/raw/master/ufl/ubuntu/Ubuntu-Bold.ttf' ,
    fontFamily : 'Ubuntu' ,
    fontWeight : 'bold' ,
    // XXX: You can also specify additional font styling.
    color : 'blue' ,
  } ,
} ;

const SomeComponent = ( ) => {
  // Fetch the desired font by name. When the font has been cached, it will automatically update the View.
  const { ... fontProps } = useCustomFont ( 'UbuntuBold' ) ;
  return (
    < Text
      { ... fontProps }
      children = "Hello, world!"
    />
  ) ;
} ;

export default ( ) => (
  < CustomFontsProvider
    fontFaces = { fontFaces }
  >
    < SomeComponent />
  </ CustomFontsProvider >
) ;

Wo ist mein Schiedsrichter?

react-native-custom-fonts erfasst die ref Requisite der Text , um die Immobilienzuweisung von Laufzeit zu treffen. Sie können weiterhin auf zwei Arten auf den Schiedsrichter zugreifen:

Sie können entweder einen Schiedsrichter liefern :

 const ref = useRef ( ) ;
const { ... fontProps } = useCustomFont ( 'UbuntuBold' , ref ) ;
return (
  < Text
    ref = { ref }
    { ... fontProps }
  />
) ;

Oder Sie können den bereitgestellten REF verwenden :

 const { ref , ... fontProps } = useCustomFont ( 'UbuntuBold' ) ;
return (
  < Text
    ref = { ref }
    { ... fontProps }
  />
) ;

Super, also was ist mit zusätzlichen Stilen?

Dies ist auch möglich. Holen Sie sich einfach die style -Requisite vom Anruf nach useCustomFont :

 const { style , ... fontProps } = useCustomFont ( 'UbuntuBold' ) ;
return (
  < TextInput
    style = { [ style , { fontColor : 'blue' } ] }
    { ... fontProps }
  />
) ; 

? Proptypen

CustomFontsProvider

Dies ist ein React -Kontextanbieter für alle Kinder, die mit einem Aufruf an ReactNativeCustomFonts.withCustomFont eingeschlossen wurden. Verwaltet das Ausbruch und die Zuordnung von Ferngeschrieben an Kinder.

Prop -Name	Datentyp	Erforderlich	Standard	Beschreibung
fontFaces	ProfTypes.shape ({})	FALSCH	{}	Definiert die Konfiguration der Remote -Schriftarten.
fallback	ProfTypes.shape ({})	FALSCH	{Farbe: 'Rot', Schriftgewicht: 'BOLD'}	Der Stil, der verwendet werden soll, wenn die Schriftart downloads fehlschlägt.
onDownloadDidStart	ProfTypes.func	FALSCH	() => null	Rückruf für den Fall, wenn der Anbieter mit dem Herunterladen der Schriftarten beginnt.
onDownloadDidEnd	ProfTypes.func	FALSCH	() => null	Rückruf für den Abschluss des Anbieters zum Herunterladen der Schriftarten.
onDownloadDidError	ProfTypes.func	FALSCH	() => null	Aufgerufen, wenn beim Herunterladen der Schriftarten ein Fehler geworfen wurde.

? Beitragen

Bitte melden Sie alle Probleme, auf die Sie stoßen, und stellen Sie eine Pull -Anfrage ab, wenn Sie Verbesserungen hinzufügen möchten. Um Änderungen vorzunehmen, können Sie sich einfach vom master abzweihen.

✌️ Lizenz

MIT