React Native menambahkan huruf tebal atau miring ke satu kata di bidang <Text>

Bagaimana cara membuat satu kata di bidang Teks menjadi tebal atau miring? Jenis seperti ini:

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

Jika saya membuat bidang teks baru untuk karakter tebal itu akan memisahkannya ke baris lain jadi itu pasti bukan cara untuk melakukannya. Ini seperti membuat tag <p> di dalam tag <p> hanya untuk membuat satu kata tebal.

Anda dapat menggunakan <Text>seperti wadah untuk komponen teks Anda yang lain. Ini contohnya:

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

Berikut ini contohnya .

Untuk nuansa yang lebih seperti web:

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

<Text>I am in <B>bold</B> yo.</Text>

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

Gunakan perpustakaan react native ini

Untuk memasang

npm install react-native-htmlview --save

Penggunaan Dasar

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

Mendukung hampir semua tag html.

Untuk penggunaan lebih lanjut seperti

1. Penanganan link
2. Rendering Elemen Kustom

Lihat ReadMe ini

Ini tidak dalam bidang teks seperti yang diminta tetapi membungkus elemen teks terpisah ke dalam tampilan akan memberikan keluaran yang diinginkan. Ini dapat digunakan jika Anda tidak ingin menambahkan pustaka lain ke dalam proyek Anda hanya untuk menata beberapa teks.

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

Akan menghasilkan sebagai berikut

Saya adalah pengelola react-native-spannable-string

<Text/>Komponen bersarang dengan gaya kustom berfungsi dengan baik tetapi tingkat pemeliharaannya rendah.

Saya sarankan Anda membangun string spannable seperti ini dengan perpustakaan ini.

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

Anda bisa melapiskan komponen Teks dengan gaya yang diperlukan. Gaya akan diterapkan bersama dengan gaya yang sudah ditentukan di komponen Teks pertama.

Contoh:

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

Komponen Nesting Text tidak dapat dilakukan sekarang, tetapi Anda dapat membungkus teks Anda dalam View seperti ini:

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

Saya menggunakan string di dalam tanda kurung untuk memaksa spasi antar kata, tetapi Anda juga dapat mencapainya dengan marginRight atau marginLeft. Semoga membantu.

sebagai contoh!

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>

Teks tebal:

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

Teks miring:

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