Wie mache ich ein einzelnes Wort in einem Textfeld fett oder kursiv? Ein bisschen wie das:
<Text>This is a sentence <b>with</b> one word in bold</Text>
Wenn ich ein neues Textfeld für das fett gedruckte Zeichen erstelle, wird es in eine andere Zeile getrennt, sodass dies sicherlich nicht der richtige Weg ist. Es wäre, als würde man ein <p> -Tag innerhalb eines <p> -Tags erstellen, um nur ein Wort fett zu machen.
react-native
Hasen
quelle
quelle
<Text style={{fontWeight: 'bold'}}> with</Text>
in drei separate Zeilen aufteilen , verlieren Sie den führenden Platz, sodass Sie ihn möglicherweise verwenden möchten{' with'}
, um sicherzugehen, dass Sie ihn immer haben.styled-components
Sie können, eine kühne übergeben könnenproperty
.Für ein webartigeres Gefühl:
quelle
<Strong>
statt<B>
:)const B = this.B
demrender
Sie können https://www.npmjs.com/package/react-native-parsed-text verwenden
quelle
Verwenden Sie diese native Bibliothek
Installieren
npm install react-native-htmlview --save
Grundlegende Verwendung
Unterstützt fast alle HTML-Tags.
Für fortgeschrittenere Nutzung wie
Sehen Sie sich diese ReadMe an
quelle
Es befindet sich nicht wie gewünscht in einem Textfeld, aber das Umschließen separater Textelemente in eine Ansicht würde die gewünschte Ausgabe ergeben. Dies kann verwendet werden, wenn Sie Ihrem Projekt keine weitere Bibliothek hinzufügen möchten, nur um einige Texte zu gestalten.
Würde sich wie folgt ergeben
quelle
Ich bin ein Betreuer von reag-native-spannable-string
Verschachtelte
<Text/>
Komponenten mit benutzerdefiniertem Stil funktionieren gut, aber die Wartbarkeit ist gering.Ich schlage vor, dass Sie mit dieser Bibliothek einen solchen spannbaren String erstellen.
quelle
Sie können die Textkomponenten einfach mit dem gewünschten Stil verschachteln. Der Stil wird zusammen mit dem bereits definierten Stil in der ersten Textkomponente angewendet.
Beispiel:
quelle
Das Verschachteln von Textkomponenten ist derzeit nicht möglich, aber Sie können Ihren Text in eine Ansicht wie folgt einschließen:
Ich habe die Zeichenfolgen in den Klammern verwendet, um den Abstand zwischen den Wörtern zu erzwingen, aber Sie können ihn auch mit marginRight oder marginLeft erreichen. Ich hoffe es hilft.
quelle
beispielsweise!
<Text> 123<TextBold/> </Text>
quelle
quelle
Fettgedruckter Text:
Kursiver Text:
quelle