react-native：多色文本视图

Question

我想渲染一行文字，其中一些单词以不同的颜色突出显示。

理想情况下，我会使用带反应的span标签。

想知道如何使用react-native做同样的事情？

Answer 1

您可以使用嵌套的文本组件

来实现此目的

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

这里有一个link文档更好地解释

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>