react native text size
v3.0.0
Messen Sie den Text genau, bevor Sie ihn auslegen und Schriftinformationen aus Ihrer App (Android und iOS) erhalten.
| In meinem Land (Mexiko) werden Softwareentwickler schlecht bezahlt, so dass ich nach einem anderen Job suchen musste, um meinen Lebensunterhalt zu verdienen, und ich kann nicht mehr Zeit für das Ausschalten dieser und anderer Repositorys, die im Laufe der Jahre benötigt werden, mehr Geld für mich generiert. Wenn jemand in die Wartung dieses Repositorys interessiert ist, würde ich ihn gerne zusammen mit dem zugehörigen NPM -Paket an sie übertragen. |
|---|
| In meinem Land (Mexiko) haben Softwareentwickler Angst, daher musste ich nach einem anderen Job suchen, um meinen Lebensunterhalt zu verdienen, und ich kann nicht mehr Zeit damit verbringen, diese und andere Repositorys zu behalten, als seit Jahren nie Geld generiert. Wenn jemand daran interessiert ist, dieses Repository aufrechtzuerhalten, werde ich ihn gerne sowie das zugehörige NPM -Paket übertragen. |
Es gibt zwei Hauptfunktionen: flatHeights , um die Höhe verschiedener Textblöcke gleichzeitig zu erhalten, die für Komponenten wie <FlatList> oder <RecyclerListView> optimiert sind.
Das andere ist measure , die detaillierte Informationen zum Texttext erhält:
Die Breite und Höhe sind praktisch wie die, die aus dem onLayout -Ereignis einer <Text> -Komponente mit denselben Eigenschaften erhalten wurden.
In beiden Funktionen ist der zu gemessene Text erforderlich, der Rest der Parameter ist jedoch optional und funktioniert auf die gleiche Weise wie bei React Native:
fontFamilyfontSizefontWeightfontStylefontVariant (iOS)includeFontPadding (Android)textBreakStrategy (Android)letterSpacingallowFontScalingwidth : Einschränkung für automatische Zeilenumbrüche basierend auf der Strategie für Textbroak.In Adionion enthält die Bibliothek Funktionen, um Informationen über die für die App sichtbaren Schriftarten zu erhalten.
Wenn es Ihnen geholfen hat, unterstützen Sie bitte meine Arbeit mit einem Stern oder Ko-Fi.
Meistens automatische Installation von NPM
yarn add react-native-text-size
react-native link react-native-text-size Ändern Sie die compile in die implementation im Abhängigkeitsblock der Datei Android/App/Build.grale.
Anforderungen:
Für Versionen vor 0,56 von React Native verwenden Sie bitte React-nativ-text-Größe v2.1.1
Siehe manuelle Installation des Wiki als Alternative, wenn Sie Probleme mit der automatischen Installation haben.
measure
flatHeights
specsForTextStyles
fontFromSpecs
fontFamilyNames
fontNamesForFamilyName
measure ( options : TSMeasureParams ) : Promise < TSMeasureResult > Diese Funktion misst den Text wie RN und seine Ergebnisse bestehen* mit dem des Onlayout -Ereignisses von Text . Es wird eine Teilmenge der von <Text> verwendeten Eigenschaften verwendet, um die zu verwendenden Schriftart- und Oher -Optionen zu beschreiben.
Wenn Sie width bereitstellen, wendet die Messung zusätzlich zu den expliziten Linienbrüchen automatische Verpackungen an.
* In iOS kann es inkonsistenten sein. Sehen Sie sich dieses Problem kennen, um mehr zu erfahren.
Notiz:
Obwohl diese Funktion genau ist und vollständige Informationen liefert, kann sie schwer sein, wenn der Text viel ist, wie die, die in einer Flatlist angezeigt werden kann. In diesen Fällen ist es besser, flatHeights zu verwenden, was für die Batch -Verarbeitung optimiert ist.
Einfaches JS -Objekt mit diesen Eigenschaften (nur text ist erforderlich):
| EIGENTUM | Typ | Standard | Notizen |
|---|---|---|---|
| Text | Saite | (Keiner) | Dies ist der einzige erforderliche Parameter und kann Emojis oder leer sein, aber es darf nicht null sein.Wenn dies eine leere Zeichenfolge ist, ist die resultierende width Null. |
| Schriftfamilie | Saite | Ich bin abhängig | Der Standard ist der gleiche von React Native: Roboto in Android, San Francisco in iOS angewendet. Hinweis: Der Gerätehersteller oder ein benutzerdefiniertes ROM kann die Standardschrift für die Standardschrift ändern. |
| Schriftgewicht | Saite | 'Normal' | Auf Android haben die Zahlenbereiche keine Granularität und '500' bis '900' "fett", aber Sie können fontFamily mit spezifischem Gewicht verwenden ("sans-serif-dünn", "sans-serif-medium" usw.). |
| Schriftgröße | Nummer | 14 | Die Standard -Schriftgröße stammt von RN. |
| Fontstyle | Saite | 'Normal' | Einer von "normal" oder "kursiv". |
| Fontvariante | Array | (Keiner) | nur iOS |
| FonneTscaling | Boolean | WAHR | Um die Einstellung großer Schriftarten des Benutzers zu respektieren (dh SP -Einheiten verwenden). |
| Briefe | Nummer | (Keiner) | Zusätzlicher Abstand zwischen Zeichen (auch bekannt als tracking ).HINWEIS: In iOS storniert ein Null automatisch Kerning. Alles iOS, Android mit API 21+ |
| IncludeFontPadding | Boolean | WAHR | Addionalalales Ober- und Unterpolsterung, um bestimmte Zeichen zu vermeiden. Nur Android |
| Textbreakstrategy | Saite | "Highqualy" | Eines von 'einfach', 'ausgeglichen' oder 'hochqualisch'. Nur Android mit API 23+ |
| Breite | Nummer | Max_int | Die Breite einschränken. Die Ergebnishöhe variiert je nach automatischem Textfluss. |
| Useprecisewidth | Boolean | FALSCH | Wenn true , enthält das Ergebnis eine genaue width und die lastLineWidth -Eigenschaft.Sie können den Effekt dieser Flagge in der Beispiel -App sehen. |
| LineInfOfOrline | Nummer | (Keiner) | Wenn >=0 , enthält das Ergebnis eine LineInfo -Eigenschaft mit Informationen für die erforderliche Zeilennummer. |
Die Beispiel -App zeigt interaktiv den Effekt dieser Parameter auf den Bildschirm.
measure ein Versprechen, das mit diesen Eigenschaften in ein JS -Objekt auflöst:
| EIGENTUM | Typ | Notizen |
|---|---|---|
| Breite | Nummer | Gesamt gebrauchte Breite. Es kann LES oder gleich der width Option sein.Auf Android kann dieser Wert je nach usePreciseWidth -Flag variieren. |
| Höhe | Nummer | Gesamthöhe, einschließlich oberer und unterer Polsterung, wenn includingFontPadding wurde festgelegt (der Ausfall). |
| LastLineWidth | Nummer | Breite der letzten Linie, ohne zurückhaltende Lücken. Wenn usePreciseWidth false ist (der Standard), ist diese Eigenschaft undefiniert. |
| Linecount | Nummer | Anzahl der Zeilen unter Berücksichtigung harter und automatischer Linienbrüche. |
| LineInfo | Objekt | Zeileninformationen. Wenn die Option lineInfoForLine nicht angegeben ist, ist diese Eigenschaft undefiniert. |
Wenn der Wert der lineInfoForLine Greelter oder gleicher lineCount ist, ist diese Informationen für die letzte Zeile (dh lineCount - 1).
| EIGENTUM | Typ | Notizen |
|---|---|---|
| LINIE | Nummer | Zeilennummer dieser Informationen, Basis 0. Es kann geringer sein als die lineInfoForLine . |
| Start | Nummer | Textversatz des Beginns dieser Zeile. |
| Ende | Nummer | Textversatz nach dem letzten sichtbaren Zeichen (so wird die Whitespace nicht gezählt) in dieser Zeile. |
| Unten | Nummer | Die vertikale Position des Bodens dieser Linie, einschließlich der Polsterung. |
| Breite | Nummer | Horizontaler Exte dieser Linie, einschließlich führender Randeingänge, aber mit Ausnahme der nachverfolgenden Whitespace. Verwenden Sie usePreciseWidth:true um einen genauen Wert für diese Eigenschaft zu erhalten. |
Im Fehlerfall wird dem Versprechen ein erweitertes Objekt mit einem der folgenden Fehlercodes als wörtliche Zeichenfolge abgelehnt:
| Code | Details |
|---|---|
| E_missing_parameters | measure erfordert ein Objekt mit den Parametern, die nicht bereitgestellt wurden. |
| E_missing_text | Der zu messende Text ist null oder wurde nicht bereitgestellt. |
| E_invalid_font_spec | Die Schriftart Spezifikation ist nicht gültig. Es ist unwahrscheinlich, dass dies auf Android passieren wird. |
| E_UKNNOWN_ERROR | Nun ... wer weiß? |
//...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'
type Props = { }
type State = { width : number , height : number }
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
fontFamily = undefined ,
fontSize = 24 ,
fontStyle = 'italic' ,
fontWeight = 'bold' ,
}
const text = 'I ❤️ rnTextSize'
class Test extends Component < Props , State > {
state = {
width : 0 ,
height : 0 ,
}
async componentDidMount ( ) {
const width = Dimensions . get ( 'window' ) . width * 0.8
const size = await rnTextSize . measure ( {
text , // text to measure, can include symbols
width , // max-width of the "virtual" container
... fontSpecs , // RN font specification
} )
this . setState ( {
width : size . width ,
height : size . height
} )
}
// The result is reversible
render ( ) {
const { width , height } = this . state
return (
< View style = { { padding : 12 } } >
< Text style = { { width , height , ... fontSpecs } } >
{ text }
</ Text >
</ View >
)
}
} flatHeights ( options : TSHeightsParams ) : Promise < number [ ] >Berechnen Sie die Höhe der einzelnen Saiten in einem Array.
Dies ist eine Alternative zum measure für Fälle, in denen Sie die Höhe von nummerösen Textblöcken mit gemeinsamen Eigenschaften (Breite, Schriftart usw.), typischer Anwendungsfall mit <FlatList> oder <RecyclerListView> -Komponenten berechnet haben.
Die Messung verwendet den gleichen Algorithmus wie measure , kostet jedoch nur die Höhe jedes Blocks und durch Vermeiden mehrerer Schritte durch die Brücke ist es schneller ... viel schneller auf Android!
Ich habe auf 5.000 zufällige Textblöcke getestet, und dies waren die Ergebnisse (MS):
measure | flatHeights | |
|---|---|---|
| Android | 49.624 | 1.091 |
| iOS | 1.949 | 732 |
In Zukunft werde ich ein Beispiel für die Verwendung mit Flatlist und mehreren Stilen auf derselben Karte vorbereiten.
Dies ist ein Objekt ähnlich dem, das Sie measure haben, aber die text ist eine Reihe von Zeichenfolgen, und die usePreciseWidth und lineInfoForLine -Optionen werden ignoriert.
| EIGENTUM | Typ | Standard |
|---|---|---|
| Text | String [] | (Keiner) |
| Breite | Nummer | Unendlichkeit |
| Schriftfamilie | Saite | Ich bin abhängig |
| Schriftgewicht | Saite | 'Normal' |
| Schriftgröße | Nummer | 14 |
| Fontstyle | Saite | 'Normal' |
| Fontvariante | Array | (Keiner) |
| FonneTscaling | Boolean | WAHR |
| Briefe | Nummer | (Keiner) |
| IncludeFontPadding | Boolean | WAHR |
| Textbreakstrategy | Saite | "Highqualy" |
Die Ergebnisse sind ein Versprechen, das sich in ein Array mit der Höhe eines jeden Blocks (in SP ) in derselben Reihenfolge, in der die Blöcke empfangen wurden, auflöst.
Im Gegensatz zu Mess gibt null 0 ohne Fehler zurück, und leere Zeichenfolgen geben die gleiche Höhe zurück, die RN null <Text> -Komponenten zuweist.
//...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'
type Props = { texts : string [ ] }
type State = { heights : number [ ] }
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
fontFamily = undefined ,
fontSize = 24 ,
fontStyle = 'italic' ,
fontWeight = 'bold' ,
}
const texts = [ 'I ❤️ rnTextSize' , 'I ❤️ rnTextSize using flatHeights' , 'Thx for flatHeights' ]
class Test extends Component < Props , State > {
state = {
heights : [ ] ,
}
async componentDidMount ( ) {
const { texts } = this . props
const width = Dimensions . get ( 'window' ) . width * 0.8
const heights = await rnTextSize . flatHeights ( {
text : texts , // array of texts to measure, can include symbols
width , // max-width of the "virtual" container
... fontSpecs , // RN font specification
} )
this . setState ( {
heights
} )
}
render ( ) {
const { texts } = this . props
const { heights } = this . state
return (
< View style = { { padding : 12 } } >
{ texts . map (
( text , index ) => (
< Text style = { { height : heights [ index ] , ... fontSpecs } } >
{ text }
</ Text >
)
) }
</ View >
)
}
} specsForTextStyles ( ) : Promise < { [ key : string ] : TSFontForStyle } >Holen Sie sich System Schriftinformationen für das laufende Betriebssystem.
Dies ist ein Wrapper für die UIFont.preferredFontForTextStyle Oros
Das Ergebnis ist ein Versprechen, das sich auf ein JS -Objekt beschreitet, der vom Betriebssystem abhängig ist. Es werden jedoch die Werte wiederum die in den RN -Stile verwendeten Objekte vollständig kompatibel zurückgehalten. Daher kann es zum Stylize <Text> oder <TextInput> -Komponenten verwendet werden:
| EIGENTUM | Typ | Notizen |
|---|---|---|
| Schriftfamilie | Saite | Systemfamilienname oder Schriftart. |
| Schriftgröße | Nummer | Schriftgröße in SP (ungezogen). |
| Fontstyle | TsfontStyle | Nur wenn "kursiv", undefiniert, wenn der Stil "normal" ist. |
| Schriftgewicht | Tsfontgewicht | Nur wenn "fett" und undefiniert das Gewicht "normal" ist. |
| Fontvariante | Tsfontvariant [] oder null | nur iOS . Derzeit enthält kein Stil diese Eigenschaft. |
| Briefe | Nummer | Weggelassen, wenn Sie auf Android mit RN Lower als 0,55 laufen |
Um die Schlüsselnamen zu kennen, sehen Sie sich die Schlüssel von SpecsFortextstyles im Wiki an.
Ich habe nicht versucht, die Schlüssel des Ergebnisses zu normalisieren, da sie mit Ausnahme von zwei oder drei eine andere Interpretation in jedem Betriebssystem haben, aber Sie können sie verwenden, um Zollstile entsprechend Ihren Anforderungen zu erstellen.
fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >Gibt die Eigenschaften der Schriftart aus den angegebenen Spezifikationen zurück.
Dieser Parameter ist eine Teilmenge von TSMeasureParams , daher werden die Details hier weggelassen.
| EIGENTUM | Typ | Standard |
|---|---|---|
| Schriftfamilie | Saite | iOS: 'San Francisco', Android: 'Roboto' |
| Schriftgewicht | Saite | 'Normal' |
| Schriftgröße | Nummer | 14 |
| Fontstyle | Saite | 'Normal' |
| Fontvariante | String [] | (Keiner) |
| Briefe | Nummer | 0 |
fontFromSpecs verwendet ein implizites allowsFontScaling:true und da dies keine Messfunktion ist, includeFontPadding die Sie nicht haben.
Die Ergebnisse sind ein Versprechen, das sich in ein JS -Objekt mit Informationen für die angegebene Schriftart und Größe, Einheiten in SP in Android oder Punkte in iOS unter Verwendung von schwimmenden Punktzahlen auflöst.
| EIGENTUM | Typ | Details |
|---|---|---|
| Schriftfamilie | Saite | In Android ist es die gleiche Zeichenfolge wie Parameter. |
| Fontname | Saite | nur iOS , immer undefined in Android. |
| Schriftgröße | Nummer | Es kann sich vom angegebenen Parameter unterscheiden, wenn der Parameter Dezimalstellen enthält. |
| Fontstyle | Saite | "Normal" oder "kursiv". |
| Schriftgewicht | Saite | "Normal" oder "Fett" kann auf iOS von '100' bis '900' übergehen. |
| Fontvariante | String [] | nur iOS , immer undefined in Android. |
| aufsteigen | Nummer | Die empfohlene Entfernung über der Grundlinie für einen einzelnen Abstandstext. |
| absteigen | Nummer | Die empfohlene Entfernung unter der Grundlinie für einen einzelnen Abstandstext. |
| Capheight | Nummer | iOS nur Höhe der Kapitalcharaktere. |
| Xheight | Nummer | iOS nur Höhe des Kleinbuchstabens "x". |
| Spitze | Nummer | Nur Android . Maximale Entfernung über der Grundlinie für die Tallles Glyphe in der Schrift. |
| Unten | Nummer | Nur Android . Maximale Entfernung unter der Grundlinie für die niedrigste Glyphe in der Schriftart. |
| Führend | Nummer | Der empfohlene zusätzliche Raum, um zwischen Textzeilen hinzuzufügen. |
| LineHeight | Nummer | Die empfohlene Linienhöhe. Es sollte größer sein, wenn Text Unicode -Symbole wie Emojis enthalten. |
| _Hash | Nummer | Hash -Code kann zum Debuggen nützlich sein. |
* Die Verwendung von Floats ist genauer als Ganzzahlen und ermöglicht es Ihnen, Ihre Rundungsmethode für Vorzugsrunden zu verwenden, aber in diesen Werten jedoch nicht mehr als 5 Ziffern der Genauigkeit. Denken Sie auch daran, RN funktioniert nicht mit Subpixeln in Android und wird diese Werte abschneiden.
Weitere Informationen finden Sie in:
Verständnis der Typografie auf der Google -Materialdesign -Site.
Über Texthandling in iOS für iOS.
fontFamilyNames ( ) : Promise < string [ ] >Gibt ein Versprechen für eine Reihe von Schriftstellennamen der Schriftart zurück, die auf dem System verfügbar sind.
Auf iOS verwenden Sie die UIFont.familyNames -Methode des UIKIT.
Auf Android ist das Ergebnis für die Systemschriften hart codiert und ergänzt dynamisch mit den von Ihrer App installierten Schriftarten, falls vorhanden.
Weitere Informationen zu Android -Schriftarten und benutzerdefinierten Schriftarten im Wiki finden Sie im Wiki, um mehr über diese Liste zu erfahren.
fontNamesForFamilyName ( fontFamily : string ) : Promise < string [ ] > Wrapper für die methode UIFont.fontNamesForFamilyName von UIKIT gibt eine Reihe von Schriftstellern, die in einer bestimmten Schriftfamilie verfügbar sind, zurück.
Sie können die fontFamilyNames -Funktion des RNTextSize verwenden, um ein Array der verfügbaren Schriftfamiliennamen auf dem System zu erhalten.
Dies ist eine iOS -Funktion, die es auf Android immer auf null beschließt.
In iOS beinhaltet die resultierende Breite von sowohl measure und flatHeights die führende Whitespace, während sie in Android verworfen werden.
Auf iOS berücksichtigt RN die absolute Position auf dem Bildschirm, um die Abmessungen zu berechnen. RnTextSize kann das nicht und beide, Breite und Höhe, kann einen Unterschied von bis zu 1 Pixel haben (nicht Punkt).
RN unterstützt die dynamischen Typgrößen nicht, letterSpacing macht einen hervorragenden Job, der diese Funktion allowFontScaling .
Ich hoffe, dass eine zukünftige Version von RN dieses Problem löst.
Obwohl RNTextSize die resultierende lineHeight in Summenfunktionen liefert, unterstützt es es nicht als Parameter, weil Sie einen nicht standardmäßigen Algorithmus verwenden, um ihn festzulegen. Ich empfehle, dass Sie lineHeight nicht verwenden, es sei denn, es ist streng bedürftig. Wenn Sie es jedoch verwenden, versuchen Sie, es 30% oder mehr als die Schriftgröße zu erwerben, oder verwenden Sie die RNTextSize fontFromSpecs -Methode, wenn Sie mehr Präzision wünschen.
Verschachtelte <Text> Komponenten (oder mit Bildern im Inneren)
Ich bin ein Full-Stack-Entwickler mit mehr als 20 Jahren Erfahrung und ich versuche, den größten Teil meiner Arbeit kostenlos zu teilen und anderen zu helfen, aber dies erfordert viel Zeit und Mühe. Wenn Sie meine Arbeit mögen, sollten Sie bitte ...
Natürlich sind Feedback, PRs und Stars auch willkommen?
Vielen Dank für Ihre Unterstützung!
Die BSD 2-Klausel "vereinfachte" Lizenz.
© 2018-2019, Alberto Martínez. Alle Rechte vorbehalten.
