如何在React Native中逐行突出显示文本

Question

我想在我的React Native应用中进行文字突出显示。我正在使用React Native的Text组件来显示文本，我可以给它一个backgroundColor，但是我在下面的图像中有什么真正的亮点：

Answer 1

您可以使用react-native-highlight-words库。

以下是一个例子：

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Highlighter from 'react-native-highlight-words';

export default class Example extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', paddingTop: 300}}>
        <Highlighter
          highlightStyle={{backgroundColor: 'greenyellow'}}
          searchWords={["Swine Flu is an infection caused by"]}
          textToHighlight="Swine Flu is an infection caused by..."
        />
        <Highlighter
          highlightStyle={{backgroundColor: 'lightblue'}}
          searchWords={["swine flu"]}
          textToHighlight="The risk of swine flu..."
        />
      </View>
    );
  }
}