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

我想通过更改文本的背景颜色来突出显示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>
    );
  }
}

但是将文本拆分为单个单词似乎不是最佳解决方案,并且具有巨大的性能成本.有没有更清洁的方法呢？

解决方法

我相信问题是组件上的display css属性.

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

见例：https://jsfiddle.net/oorangecchicken/2qkey6o9/