React Native thêm chữ đậm hoặc chữ nghiêng vào các từ đơn trong trường <Text>

Làm cách nào để in hoặc nghiêng một từ trong trường Văn bản? Kiểu như thế này:

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

Nếu tôi tạo một trường văn bản mới cho ký tự in đậm, nó sẽ tách nó ra một dòng khác nên đó chắc chắn không phải là cách để làm điều đó. Nó giống như tạo thẻ <p> trong thẻ <p> chỉ để in đậm một từ.

Bạn có thể sử dụng <Text>như một vùng chứa cho các thành phần văn bản khác của mình. Đây là ví dụ:

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

Đây là một ví dụ .

Để có cảm giác giống web hơn:

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

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

bạn có thể sử dụng 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',
  },
 
});

Sử dụng thư viện gốc phản ứng này

Để cài đặt

npm install react-native-htmlview --save

Cách sử dụng cơ bản

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

Hỗ trợ hầu hết các thẻ html.

Để sử dụng nâng cao hơn như

1. Xử lý liên kết
2. Kết xuất phần tử tùy chỉnh

Xem ReadMe này

Nó không nằm trong trường văn bản như đã hỏi nhưng việc gói các phần tử văn bản riêng biệt vào một dạng xem sẽ cho kết quả mong muốn. Điều này có thể được sử dụng nếu bạn không muốn thêm một thư viện khác vào dự án của mình chỉ để tạo kiểu cho một vài văn bản.

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

Kết quả như sau

Tôi là người bảo trì chuỗi phản ứng-native-spannable-

<Text/>Thành phần lồng nhau với kiểu tùy chỉnh hoạt động tốt nhưng khả năng bảo trì thấp.

Tôi đề nghị bạn xây dựng chuỗi có thể mở rộng như thế này với thư viện này.

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

Bạn chỉ có thể lồng các thành phần Văn bản với kiểu bắt buộc. Kiểu sẽ được áp dụng cùng với kiểu đã được xác định trong thành phần Văn bản đầu tiên.

Thí dụ:

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

Không thể lồng các thành phần Văn bản vào lúc này, nhưng bạn có thể bọc văn bản của mình trong một Dạng xem như thế này:

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

Tôi đã sử dụng các chuỗi bên trong dấu ngoặc để buộc khoảng cách giữa các từ, nhưng bạn cũng có thể đạt được điều đó bằng marginRight hoặc marginLeft. Hy vọng nó giúp.

ví dụ!

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>

Chữ in đậm:

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

Văn bản in nghiêng:

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