react-native：多色文本視圖

Question

我想渲染一行文本，其中一些單詞以不同的顏色突出顯示。

理想情況下，我會使用帶有反應的 span 標簽來完成。

想知道我將如何對 react-native 做同樣的事情？

Answer 1

您可以通過使用嵌套的 Text 組件來實現這一點

<Text style={{color: 'blue'}}>
    I am blue
    <Text style={{color: 'red'}}>
        i am red
    </Text>
    and i am blue again
</Text>

這是文檔的鏈接，可以更好地解釋它

Answer 2

你可以做得更好，我的方式：

CText = (props) => <Text style={{color: props.color}}>{props.children}</Text>

內部渲染添加：

const CText = this.CText

並返回

<Text>I am <CText color={'red'}>Blue color</CText> and <CText color={'blue'}>Blue color</CText></Text>

Answer 3

只是下一個<Text>元素

<Text>
    I am some text with 
    <Text style={{fontWeight: 'bold'}}>bold</Text> 
    stuff
<Text>