React Native aggiunge grassetto o corsivo a singole parole nel campo <Testo>


113

Come faccio a rendere una singola parola in un campo di testo in grassetto o in corsivo? Un po 'come questo:

<Text>This is a sentence <b>with</b> one word in bold</Text>

Se creo un nuovo campo di testo per il carattere in grassetto, lo separerà su un'altra riga, quindi non è sicuramente il modo per farlo. Sarebbe come creare un tag <p> all'interno di un tag <p> solo per rendere una parola in grassetto.

Risposte:


210

Puoi usarlo <Text>come un contenitore per gli altri tuoi componenti di testo. Questo è un esempio:

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

Ecco un esempio .


1
Sì, ma come ho detto, non funzionerebbe perché ogni elemento di testo è separato su righe diverse.
Hasen

1
Se dividi il tuo <Text style={{fontWeight: 'bold'}}> with</Text>in tre righe separate, perderai lo spazio iniziale, quindi potresti volerlo usare {' with'}per essere sicuro di averlo sempre.
Christoffer Karlsson,

1
Voglio solo sottolineare che se riesci styled-componentsa passare un audace property.
Crazy Barney

2
@KonstantinYakushin Link is broken, fyi
kevlarjacket

@kevlarjacket Sì. Sfortunatamente, il servizio rnplay è chiuso. Proverò ad aggiornare l'esempio.
Slowyn

60

Per una sensazione più simile al web:

const B = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text>
<Text>I am in <B>bold</B> yo.</Text>

2
questo non funziona per le variabili che hanno un valore stringa
Ismail Iqbal

4
come un web direi - usa <Strong>invece di <B>:)
pie6k

Si verificherà un arresto anomalo su Ios e Android, non è possibile utilizzare il tag <Testo> all'interno di <Testo>
Hakan

Potresti aggiungere const B = this.Balrender
Idan

@Hakan - reactnative.dev/docs/text - Volevo solo sottolineare che i tag <Text> annidati fanno effettivamente parte delle specifiche ora.
ejb

8

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


1
Grazie per aver condiviso ParsedText! Brillante
Monero Jeanniton

Benvenuti ragazzi. Happy coding
Ahmad Moussa

5

Usa questa libreria nativa per reagire

Installare

npm install react-native-htmlview --save

Utilizzo di base

 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}
   />    );
  }
}

Supporta quasi tutti i tag html.

Per un utilizzo più avanzato come

  1. Gestione dei collegamenti
  2. Rendering di elementi personalizzati

Visualizza questo file Leggimi


3

Non è in un campo di testo come richiesto, ma avvolgere elementi di testo separati in una vista darebbe l'output desiderato. Questo può essere usato se non vuoi aggiungere un'altra libreria al tuo progetto solo per disegnare alcuni testi.

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

Risulterebbe come segue

inserisci qui la descrizione dell'immagine


1

inserisci qui la descrizione dell'immagine

Sono un manutentore di react-native-spannable-string

Il <Text/>componente annidato con uno stile personalizzato funziona bene ma la manutenibilità è bassa.

Ti suggerisco di creare stringhe spannabili come questa con questa libreria.

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

0

Potresti semplicemente nidificare i componenti di testo con lo stile richiesto. Lo stile verrà applicato insieme allo stile già definito nel primo componente Testo.

Esempio:

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

0

Al momento non è possibile nidificare i componenti di testo, ma puoi disporre il testo in una vista come questa:

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

Ho usato le stringhe all'interno delle parentesi per forzare lo spazio tra le parole, ma puoi anche ottenerlo con marginRight o marginLeft. Spero che sia d'aiuto.


0

per esempio!

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

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


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

Sarebbe preferibile aggiungere qualche spiegazione per il codice
keikai

-1

Testo grassetto:

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

Testo in corsivo:

<Text>
  <Text>This is a sentence</Text>
  <Text style={{fontStyle: "italic"}}> with</Text>
  <Text> one word in italic</Text>
</Text>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.