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