React Native <Metin> alanındaki tek kelimelere kalın veya italik ekleyin

Metin alanındaki tek bir kelimeyi nasıl kalın veya italik yapabilirim? Bunun gibi bir çeşit:

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

Eğer kalın karakter için yeni bir metin alanı yaratırsam, onu başka bir satıra böler, bu yüzden kesinlikle bunu yapmanın yolu bu değildir. Bu, yalnızca bir kelimeyi kalın yapmak için bir <p> etiketi içinde bir <p> etiketi oluşturmak gibidir.

<Text>Diğer metin bileşenleriniz için bir kap gibi kullanabilirsiniz . Bu bir örnektir:

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

İşte bir örnek .

Daha web benzeri bir his için:

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

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

https://www.npmjs.com/package/react-native-parsed-text kullanabilirsiniz

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

Bu react yerel kitaplığını kullanın

Yüklemek

npm install react-native-htmlview --save

Temel Kullanım

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

Hemen hemen tüm html etiketlerini destekler.

Daha gelişmiş kullanım için

1. Bağlantı yönetimi
2. Özel Öğe Oluşturma

Bu BeniOku’yu görüntüleyin

İstendiği gibi bir metin alanında değil, ancak ayrı metin öğelerini bir görünüme kaydırmak istenen çıktıyı verecektir. Bu, projenize yalnızca birkaç metni şekillendirmek için başka bir kitaplık eklemek istemiyorsanız kullanılabilir.

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

Aşağıdaki gibi sonuçlanır

Ben react-native-spannable-string'in koruyucusuyum

<Text/>Özel stile sahip iç içe bileşen iyi çalışıyor, ancak sürdürülebilirlik düşük.

Bu kitaplıkla bunun gibi yayılabilir dizge oluşturmanızı öneririm.

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

Metin bileşenlerini gerekli stille iç içe yerleştirebilirsiniz. Stil, ilk Metin bileşeninde önceden tanımlanmış stille birlikte uygulanacaktır.

Misal:

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

Metin bileşenlerini iç içe yerleştirmek artık mümkün değil, ancak metninizi bir Görünümde şu şekilde kaydırabilirsiniz:

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

Parantez içindeki dizeleri sözcükler arasındaki boşluğu zorlamak için kullandım, ancak bunu marginRight veya marginLeft ile de elde edebilirsiniz. Umarım yardımcı olur.

Örneğin!

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>

Kalın yazı:

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

İtalik metin:

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