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.
react-native
Dagobert Renouf
quelle
quelle
Antworten:
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
quelle
render()
anstelle des Konstruktors behandelt werden. Die Verwendung von Haken mituseMemo
kann auch hilfreich sein, wenn Effizienz wichtig ist. Wenn Sie es alternativ im Konstruktor behalten möchten, ist es wichtig, einecomponentDidUpdate
Logik hinzuzufügen , die aktualisiert wird,this.style
wenn die Komponente aufgrund einer Änderung der Stilstütze aktualisiert wird.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
setCustomText
Funktion in Ihrer Komponente höchster Ordnung wie folgt importieren .Erstellen Sie dann das gewünschte benutzerdefinierte Styling / Requisiten für die reaktionsnative
Text
Komponente. In Ihrem Fall möchten Sie, dass fontFamily an jederText
Komponente arbeitet.Rufen Sie die
setCustomText
Funktion auf und übergeben Sie Ihre Requisiten / Stile an die Funktion.Und dann haben alle reaktionsnativen
Text
Komponenten Ihre deklarierte fontFamily zusammen mit allen anderen Requisiten / Stilen, die Sie bereitstellen.quelle
<Text style={styles.text}>
?? Es ist keine perfekte Lösung wie diesebody {font-family: 'Open Sans';}
haben eine Update-Lösung?Text style={styles.text}>
. Sie müssen Ihre benutzerdefinierten Requisiten nur irgendwo in Ihrer Anwendung deklarieren und sie werden auf alle Ihre Textkomponenten angewendet. Es ist sehr ähnlich zubody {font-family: ....}
Überprüfen Sie für React Native 0.56.0+ zuerst, ob defaultProps definiert ist:
Dann füge hinzu:
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 }
)quelle
defaultProps
nicht, als alle anderen Antworten geschrieben wurden, aber dies scheint jetzt der richtige Weg zu sein.style
Stütze überschreiben , um die Stile bestimmterText
Komponenten zu optimierenstyle
Requisite in der Textkomponente definiert , wird die Standardschrift ersetzt.Sie können das Textverhalten überschreiben, indem Sie es mit Text in eine beliebige Komponente einfügen:
Bearbeiten:
Text.prototype
funktioniert seit React Native 0.56 nicht mehr. Sie müssen Folgendes entfernen.prototype
:quelle
Hinzufügen
in
package.json
dann laufenreact-native link
quelle
Mit React-Native 0.56
Text.prototype.render
funktioniert die oben beschriebene Änderungsmethode nicht mehr. Sie müssen also Ihre eigene Komponente verwenden, was in einer Zeile erfolgen kann!MyText.js
AnotherComponent.js
quelle
useRef
. reactjs.org/docs/hooks-reference.html#userefFügen Sie diese Funktion Ihrer Stammkomponente hinzu
App
und 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-ccc9aacf9e5equelle
const App = StackNavigator({...})
undexport default App
wo genau würde ich diesen Code platzieren, da ich nicht glaube, dass ich hier einen Konstruktor verwenden kann?Super spät zu diesem Thread aber hier geht.
TLDR; Fügen Sie den folgenden Block in Ihre
AppDelegate.m
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.
`` `
`` `
Fügen wir nun ein "React Native" -NPM in unser package.json ein
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
Verlag
handelt sich um die Schriftart, die Sie hinzugefügt haben. Sie sollte ungefähr so aussehen: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.Sobald Sie ausgeführt haben, sollten Sie Ihre Schriftarten finden, wenn sie korrekt geladen wurden. Hier haben wir unsere in folgenden Protokollen gefunden:
Jetzt wissen wir also, dass es die
Verlag
Familie geladen hat und die Schriftarten innerhalb dieser Familie sindVerlag-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.m
mit dieser Zeile in Ihre einzufügenGetan.
quelle
In package.json einstellen
Und Link React-Native Link
quelle
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
Ö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
quelle