如何在 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>
    );
  }
}