如何正确突出显示 React Native 中的文本？

Question

我想通过更改文本的背景颜色来突出显示 React Native 应用程序中的多行文本。问题是整个文本区域的背景颜色都会发生变化，而不仅仅是单词下方。

class Example extends Component {
  render() {
    const text = '...';

    return (
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>
          {text}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 200,
  },
  textStyle: {
    backgroundColor: 'red',
  },
});

上面的代码结果如下：

但我希望它看起来像这样：

我可以通过拆分文本并将背景颜色添加到单个单词来获得该结果：

class Example extends Component {
  render() {
    const text = '...';

    const brokenText = text.split(' ').map(word => (
      <Text style={styles.textStyle}>{word} </Text>
    ));

    return (
      <View style={styles.textContainer}>
        {brokenText}
      </View>
    );
  }
}

但是将文本拆分为单个单词似乎并不是最好的解决方案，而且会带来巨大的性能成本。有什么更清洁的方法吗？

Answer 1

这个简单的 Lodash 函数

  const highLightWord = (word, highlight) => {
    const match = _.words(word, RegExp(highlight)); // "Aku"
    const notMatch = _.replace(word, match, ""); // "rana"
    return (
      <View style={{ flexDirection: "row" }}>
        <Text style={{ backgroundColor: "yellow" }}>{match}</Text>
        <Text>{notMatch}</Text>
      </View>
    );
  };

return (
 {highListSearch("Akurana", "Aku")}
)

Answer 2

这仍然不正确，但我通过在每个单词之间添加一个不可见字符（此处为无宽度空格）使其呈现为您所期望的那样，因此文本在其上中断，没有背景颜色。这是代码：

const NO_WIDTH_SPACE = '​'; // This is a special char you should copy and paste, not an empty string!

const Example = () => {
  const highlight = string =>
    string.split(' ').map((word, i) => (
      <Text key={i}>
        <Text style={styles.highlighted}>{word} </Text>
        {NO_WIDTH_SPACE}
      </Text>
    ));

  return (
    <Text>
      Some regular text {highlight('with some properly highlighted text')}
    </Text>
  );
}

const styles = StyleSheet.create({
  highlighted: {
    backgroundColor: 'yellow',
  },
});

这是一个 Snack，您可以在其中查看结果并玩弄它： https://snack.expo.io/@adesurirey/properly-highlight-text-with-react-native

肯定可以改进，我很乐意收到反馈。

Answer 3

尝试使用

react-highlight-words 库可以满足您的需求或使用react-native-highlight-words 库。

这两个库都派生自节点包highlight-words-core

Answer 4

我已经完成了，你可以看看。

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    const array =["Change code in the editor and watch it change on your phone! and fine."];
    return (
      <View style={styles.container}>
        <Text>
        {array.map(t=> (
            <Text style={styles.paragraph}>{t}</Text>))}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  paragraph: {
    backgroundColor: 'red'
  },
});

Answer 5

我认为问题在于您组件上的 display css 属性。

您的组件似乎使用display: block; 而不是display: inline; 呈现

查看示例：https://jsfiddle.net/oorangecchicken/2qkey6o9/