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

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.

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 .

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>

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',
  },
 
});

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

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

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()

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>

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.

beispielsweise!

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

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

<Text>
    <Text style={{fontWeight: "bold"}}>bold</Text>
    normal text
    <Text style={{fontStyle: "italic"}}> italic</Text>
</Text>

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>