React Native fügt einzelnen Wörtern im Feld <Text> Fett oder Kursiv hinzu

113

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.

Hasen
quelle

Antworten:

209

Sie können <Text>wie ein Container für Ihre anderen Textkomponenten verwenden. Dies ist ein Beispiel:

...
<Text>
  <Text>This is a sentence</Text>
  <Text style={{fontWeight: "bold"}}> with</Text>
  <Text> one word in bold</Text>
</Text>
...

Hier ist ein Beispiel .

Slowyn
quelle
1
Ja, aber wie gesagt, das würde nicht funktionieren, da jedes Textelement in verschiedene Zeilen unterteilt ist.
Hasen
1
Wenn Sie Ihre <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.
Christoffer Karlsson
1
Ich möchte nur darauf hinweisen, dass Sie, wenn styled-componentsSie können, eine kühne übergeben können property.
Crazy Barney
2
@KonstantinYakushin Link ist gebrochen, fyi
kevlarjacket
@ kevlarjacket Ja. Leider ist der Wiedergabedienst geschlossen. Ich werde versuchen, das Beispiel zu aktualisieren.
Slowyn
59

Für ein webartigeres Gefühl:

const B = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text>
<Text>I am in <B>bold</B> yo.</Text>
Nick
quelle
2
Dies funktioniert nicht für Variablen, die einen Zeichenfolgenwert haben
Ismail Iqbal
4
als web-like würde ich sagen - verwenden <Strong>statt <B>:)
pie6k
Es wird auf iOS und Android abstürzen. Sie können das <Text> -Tag nicht in <Text> verwenden
Hakan
Könnten Sie const B = this.Bdemrender
Idan
@Hakan - reactnative.dev/docs/text - Ich wollte nur darauf hinweisen, dass verschachtelte <Text> -Tags jetzt tatsächlich Teil der Spezifikation sind.
10.
8

Sie können https://www.npmjs.com/package/react-native-parsed-text verwenden

import ParsedText from 'react-native-parsed-text';
 
class Example extends React.Component {
  static displayName = 'Example';
 
  handleUrlPress(url) {
    LinkingIOS.openURL(url);
  }
 
  handlePhonePress(phone) {
    AlertIOS.alert(`${phone} has been pressed!`);
  }
 
  handleNamePress(name) {
    AlertIOS.alert(`Hello ${name}`);
  }
 
  handleEmailPress(email) {
    AlertIOS.alert(`send email to ${email}`);
  }
 
  renderText(matchingString, matches) {
    // matches => ["[@michel:5455345]", "@michel", "5455345"]
    let pattern = /\[(@[^:]+):([^\]]+)\]/i;
    let match = matchingString.match(pattern);
    return `^^${match[1]}^^`;
  }
 
  render() {
    return (
      <View style={styles.container}>
        <ParsedText
          style={styles.text}
          parse={
            [
              {type: 'url',                       style: styles.url, onPress: this.handleUrlPress},
              {type: 'phone',                     style: styles.phone, onPress: this.handlePhonePress},
              {type: 'email',                     style: styles.email, onPress: this.handleEmailPress},
              {pattern: /Bob|David/,              style: styles.name, onPress: this.handleNamePress},
              {pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText},
              {pattern: /42/,                     style: styles.magicNumber},
              {pattern: /#(\w+)/,                 style: styles.hashTag},
            ]
          }
          childrenProps={{allowFontScaling: false}}
        >
          Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.
          But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com
          And the magic number is 42!
          #react #react-native
        </ParsedText>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 
  url: {
    color: 'red',
    textDecorationLine: 'underline',
  },
 
  email: {
    textDecorationLine: 'underline',
  },
 
  text: {
    color: 'black',
    fontSize: 15,
  },
 
  phone: {
    color: 'blue',
    textDecorationLine: 'underline',
  },
 
  name: {
    color: 'red',
  },
 
  username: {
    color: 'green',
    fontWeight: 'bold'
  },
 
  magicNumber: {
    fontSize: 42,
    color: 'pink',
  },
 
  hashTag: {
    fontStyle: 'italic',
  },
 
});

Ahmad Moussa
quelle
1
Vielen Dank für das Teilen von ParsedText! Brilliant
Monero Jeanniton
Willkommen Jungs. Happy Coding
Ahmad Moussa
5

Verwenden Sie diese native Bibliothek

Installieren

npm install react-native-htmlview --save

Grundlegende Verwendung

 import React from 'react';
 import HTMLView from 'react-native-htmlview';

  class App extends React.Component {
  render() {
   const htmlContent = 'This is a sentence <b>with</b> one word in bold';

  return (
   <HTMLView
     value={htmlContent}
   />    );
  }
}

Unterstützt fast alle HTML-Tags.

Für fortgeschrittenere Nutzung wie

  1. Link Handling
  2. Benutzerdefiniertes Element-Rendering

Sehen Sie sich diese ReadMe an

Ismail Iqbal
quelle
3

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.

<View style={{flexDirection: 'row'}}>
 <Text style={{fontWeight: '700', marginRight: 5}}>Contact Type:</Text>
 <Text>{data.type}</Text>
</View>

Würde sich wie folgt ergeben

Geben Sie hier die Bildbeschreibung ein

Cea
quelle
1

Geben Sie hier die Bildbeschreibung ein

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.

SpannableBuilder.getInstance({ fontSize: 24 })
    .append('Using ')
    .appendItalic('Italic')
    .append(' in Text')
    .build()
MJ Studio
quelle
0

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:

 <Text style={styles.paragraph}>
   Trouble singing in. <Text style={{fontWeight: "bold"}}> Resolve</Text>
 </Text>
Sidharth V.
quelle
0

Das Verschachteln von Textkomponenten ist derzeit nicht möglich, aber Sie können Ihren Text in eine Ansicht wie folgt einschließen:

<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
    <Text>
        {'Hello '}
    </Text>
    <Text style={{fontWeight: 'bold'}}>
        {'this is a bold text '}
    </Text>
    <Text>
        and this is not
    </Text>
</View>

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.

Esteban Dib
quelle
0

beispielsweise!

const TextBold = (props) => <Text style={{fontWeight: 'bold'}}>Text bold</Text>

<Text> 123<TextBold/> </Text>

Anh Tuấn Lê
quelle
0
<Text>
    <Text style={{fontWeight: "bold"}}>bold</Text>
    normal text
    <Text style={{fontStyle: "italic"}}> italic</Text>
</Text>
Naveen Jadala
quelle
Fügen Sie eine Erklärung für Ihren Code hinzu
keikai
-1

Fettgedruckter Text:

<Text>
  <Text>This is a sentence</Text>
  <Text style={{fontWeight: "bold"}}> with</Text>
  <Text> one word in bold</Text>
</Text>

Kursiver Text:

<Text>
  <Text>This is a sentence</Text>
  <Text style={{fontStyle: "italic"}}> with</Text>
  <Text> one word in italic</Text>
</Text>
Monero Jeanniton
quelle