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

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

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

类示例扩展组件{
render（）{
常量文本='…'；
返回(
{text}
);
}
}
const styles=StyleSheet.create({
文本容器：{
flexDirection:'行'，
flexWrap:“wrap”，
宽度：200，
},
文本样式：{
背景颜色：“红色”，
},
});

上面的代码产生如下结果：

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

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

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

类示例扩展组件{
render（）{
常量文本='…'；
const brokenText=text.split（“”）.map（word=>(
{word}
));
返回(
{brokenText}
);
}
}

---

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

我认为问题在于组件上的

显示
css属性

您的组件似乎正在使用
display:block而不是
显示：内联

参见示例：
这里我已经完成了，您可以查看。

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

import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet}；
导出默认类应用程序扩展组件{
render（）{
const array=[“在编辑器中更改代码，并在手机上观察代码的更改！很好。”；
返回(
{array.map（t=>(
{t} ）}
);
}
}
const styles=StyleSheet.create({
容器：{
paddingTop:50，
},
第段：{
背景颜色：“红色”
},
});
这仍然不合适，但我让它按照您的预期进行渲染，在每个单词之间添加一个不可见的字符（此处没有宽度空格），因此文本在没有背景色的文本上断开。代码如下：

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

const NO\u WIDTH\u SPACE='1​'; // 这是一个特殊的字符，你应该复制和粘贴，而不是一个空字符串！
常量示例=（）=>{
const highlight=string=>
string.split（“”）.map（（字，i）=>(
{word}
{无宽度空间}
));
返回(
一些常规文本{highlight（'with Some property highlighted text'）}
);
}
const styles=StyleSheet.create({
突出显示：{
背景颜色：“黄色”，
},
});

这里有一个小吃，你可以在这里看到结果并玩它：

它肯定可以改进，我很乐意得到反馈。
尝试使用

可以满足您的需要或使用图书馆的图书馆

这两个库都是从节点包中派生出来的
这个带有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>
    );
  };

@布鲁诺·布鲁格请投票并勾选答案。如果它帮助你，为了帮助我。它仍然高亮显示，直到行的末尾（只有最后一行在正确的位置结束）。我认为内部文本（设置背景颜色的地方）的包装方式与它只是一个文本组件的包装方式相同：/我认为React Native不支持内联显示（仅限flex）。我能接近的是flexWrap属性，但它似乎做不到完全相同的事情你试过使用文本阴影之类的东西吗？我不确定本地等价物会有什么反应be@FelipetextShadow有不同的外观（它在文本下是一个模糊的阴影），并不能很好地突出显示文本：/true，我想可能有一些黑客的用法，但没有成功。如果按新行而不是按字符分割，会怎么样，类似于此
return (
 {highListSearch("Akurana", "Aku")}
)