如何在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

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

你的分量似乎与呈递display: block;代替display: inline;

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

Answer 2

在这里，我已经做了，你可以看看。

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