रिएक्टिव नेटिव <टेक्स्ट> फ़ील्ड में एकल शब्दों में बोल्ड या इटैलिक्स जोड़ते हैं

Question

मैं टेक्स्ट फ़ील्ड में किसी शब्द को कैसे बोल्ड या इटैलिक कर सकता हूँ? इस तरह की:

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

अगर मैं बोल्ड कैरेक्टर के लिए एक नया टेक्स्ट फील्ड बनाता हूं तो वह इसे दूसरी लाइन पर अलग कर देगा ताकि निश्चित रूप से इसे करने का तरीका न हो। यह केवल एक शब्द को बोल्ड बनाने के लिए <p> टैग के भीतर <p> टैग बनाने जैसा होगा।

Answer 1

आप <Text>अपने अन्य पाठ घटकों के लिए एक कंटेनर की तरह उपयोग कर सकते हैं । यह उदाहरण है:

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

यहाँ एक उदाहरण है ।

Comments

हां, लेकिन जैसा मैंने कहा, वह काम नहीं करेगा क्योंकि प्रत्येक पाठ तत्व अलग-अलग लाइनों पर अलग हो जाता है।

— हसीन

यदि आप <Text style={{fontWeight: 'bold'}}> with</Text>तीन अलग-अलग लाइनों में विभाजित होते हैं, तो आप अग्रणी स्थान को खो देंगे, इसलिए आप यह {' with'}सुनिश्चित करना चाहते हैं कि आपके पास हमेशा इसका उपयोग हो।

— क्रिस्टोफर कार्ल्ससन

बस यह बताना चाहते हैं कि यदि आप styled-componentsएक साहसिक पास कर सकते हैं property।

— क्रेजी बार्नी

@KonstantinYakushin लिंक टूटा है,

— फी

@kevlarjacket हां। दुर्भाग्य से, rnplay सेवा बंद है। मैं कोशिश करूँगा और उदाहरण को अद्यतन करूँगा।

— धीरे

Answer 2

अधिक वेब जैसी अनुभूति के लिए:

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

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

Comments

यह उन वैरिएबल के लिए काम नहीं करता है जिनके पास एक स्ट्रिंग मूल्य है

— इस्माइल इकबाल

के रूप में एक वेब-जैसे मैं कहेंगे - उपयोग <Strong>के बजाय <B>:)

— pie6k

यह Ios और Android पर क्रैश हो जाएगा, आप <Text> टैग के अंदर <Text> का उपयोग नहीं कर सकते

— हक़न

आप जोड़ सकते const B = this.Bकरने के लिएrender

— Idan

@ हाकन - reactnative.dev/docs/text - बस यह इंगित करना चाहता था कि नेस्टेड <टेक्स्ट> टैग वास्तव में अब कल्पना का हिस्सा हैं।

— ईजेबी

Answer 3

आप 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. [e-mail]
          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',
  },
 
});

Comments

ParsedText साझा करने के लिए धन्यवाद! शानदार

— मोनेरो जीनितन

वेलकम दोस्तों। हैप्पी कोडिंग

— अहमद मौसा

Answer 4

इस प्रतिक्रिया का उपयोग करें देशी पुस्तकालय

स्थापित करने के लिए

npm install react-native-htmlview --save

मूल उपयोग

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

लगभग सभी HTML टैग्स का समर्थन करता है।

जैसे अधिक उन्नत उपयोग के लिए

1. लिंक हैंडलिंग
2. कस्टम तत्व प्रतिपादन

इसे देखें ReadMe

Answer 5

यह एक पाठ क्षेत्र में नहीं है जैसा कि पूछा गया है, लेकिन अलग-अलग पाठ तत्वों को एक दृश्य में लपेटने से वांछित आउटपुट मिलेगा। यदि आप केवल कुछ पाठों को स्टाइल करने के लिए अपनी परियोजना में एक और पुस्तकालय जोड़ना नहीं चाहते हैं तो इसका उपयोग किया जा सकता है।

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

परिणाम निम्नानुसार होगा

Answer 6

मैं इसका अनुरक्षक हूं प्रतिक्रिया-मूल-स्पैनबल-स्ट्रिंग का अनुचर हूं

<Text/>कस्टम शैली के साथ नेस्टेड घटक अच्छी तरह से काम करता है लेकिन स्थिरता कम है।

मेरा सुझाव है कि आप इस पुस्तकालय के साथ इस तरह से स्पैनबल स्ट्रिंग का निर्माण करें।

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

Answer 7

आप आवश्यक शैली के साथ केवल पाठ घटकों को घोंसला कर सकते हैं। शैली को पहले पाठ घटक में पहले से ही परिभाषित शैली के साथ लागू किया जाएगा।

उदाहरण:

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

Answer 8

पाठ घटकों को बनाना अब संभव नहीं है, लेकिन आप अपने पाठ को इस तरह दृश्य में लपेट सकते हैं:

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

मैंने शब्दों के बीच के स्थान को मजबूर करने के लिए कोष्ठक के अंदर तारों का उपयोग किया, लेकिन आप इसे मार्जिन या मार्जिनलिफ्ट के साथ भी प्राप्त कर सकते हैं। आशा करता हूँ की ये काम करेगा।

Answer 9

उदाहरण के लिए!

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

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

Answer 10

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

Comments

अपने कोड के लिए कुछ स्पष्टीकरण जोड़ना पसंद करेंगे

— कीकाई

Answer 11

बोल्ड अक्षर:

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

इटैलिक पाठ:

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