React Native เพิ่มตัวหนาหรือตัวเอียงให้กับคำเดี่ยวในฟิลด์ <Text>

ฉันจะทำให้คำเดียวในช่องข้อความเป็นตัวหนาหรือตัวเอียงได้อย่างไร ประเภทนี้:

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

ถ้าฉันสร้างช่องข้อความใหม่สำหรับอักขระตัวหนามันจะแยกมันออกไปอีกบรรทัดดังนั้นนั่นไม่ใช่วิธีที่จะทำอย่างแน่นอน ก็เหมือนกับการสร้างแท็ก <p> ภายในแท็ก <p> เพียงเพื่อทำให้คำหนึ่งคำเป็นตัวหนา

คุณสามารถใช้<Text>เหมือนคอนเทนเนอร์สำหรับส่วนประกอบข้อความอื่น ๆ ของคุณ นี่คือตัวอย่าง:

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

นี่คือตัวอย่าง

สำหรับความรู้สึกเหมือนเว็บมากขึ้น:

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

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

ใช้ไลบรารีเนทีฟตอบสนองนี้

ติดตั้ง

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นี้

ไม่ได้อยู่ในช่องข้อความตามที่ถาม แต่การตัดองค์ประกอบข้อความที่แยกจากกันในมุมมองจะให้ผลลัพธ์ที่ต้องการ สามารถใช้ได้หากคุณไม่ต้องการเพิ่มไลบรารีอื่นในโปรเจ็กต์ของคุณเพียงเพื่อจัดแต่งทรงผมข้อความบางส่วน

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

ย่อมส่งผลดังนี้

ฉันเป็นผู้ดูแลสตริงที่ตอบสนองแบบเนทีฟ Spannable

<Text/>ส่วนประกอบที่ซ้อนกันพร้อมสไตล์ที่กำหนดเองทำงานได้ดี แต่การบำรุงรักษาต่ำ

ฉันขอแนะนำให้คุณสร้างสตริงที่ขยายได้เช่นนี้ด้วยไลบรารีนี้

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

คุณสามารถซ้อนส่วนประกอบข้อความด้วยสไตล์ที่ต้องการได้ สไตล์จะถูกนำไปใช้กับสไตล์ที่กำหนดไว้แล้วในองค์ประกอบข้อความแรก

ตัวอย่าง:

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

ไม่สามารถใช้ส่วนประกอบ Nesting Text ได้ในขณะนี้ แต่คุณสามารถตัดข้อความของคุณในมุมมองดังนี้:

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

ฉันใช้สตริงในวงเล็บเพื่อบังคับช่องว่างระหว่างคำ แต่คุณสามารถบรรลุได้ด้วย marginRight หรือ marginLeft หวังว่าจะช่วยได้

ตัวอย่างเช่น!

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>

ข้อความตัวหนา:

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