React Native ajoute des caractères gras ou italiques aux mots simples dans le champ

Comment créer un mot dans un champ de texte en gras ou en italique? Un peu comme ça:

This is a sentence with one word in bold 

Si je crée un nouveau champ de texte pour le caractère gras, il le séparera sur une autre ligne, ce qui n’est sûrement pas la solution. Ce serait comme créer une balise

dans une balise

pour créer un mot en gras.

Vous pouvez utiliser comme un conteneur pour vos autres composants de texte. Ceci est un exemple:

 ...  This is a sentence  with  one word in bold  ... 

Voici un exemple .

Pour une sensation plus Web:

 const B = (props) => {props.children} 
 I am in bold yo. 

Utilisez cette bibliothèque native de réaction

À installer

npm install react-native-htmlview --save

Utilisation de base

  import React from 'react'; import HTMLView from 'react-native-htmlview'; class App extends React.Component { render() { const htmlContent = 'This is a sentence with one word in bold'; return (  ); } } 

Prend en charge presque toutes les balises HTML.

Pour une utilisation plus avancée comme

  1. Gestion des liens
  2. Rendu d’élément personnalisé

Voir ce fichier Lisez – moi

vous pouvez utiliser https://www.npmjs.com/package/react-native-parsed-text

 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(matchingSsortingng, matches) { // matches => ["[@michel:5455345]", "@michel", "5455345"] let pattern = /\[(@[^:]+):([^\]]+)\]/i; let match = matchingSsortingng.match(pattern); return `^^${match[1]}^^`; } render() { return (   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. [email protected] And the magic number is 42! #react #react-native   ); } } 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', }, }); 
  bla bla