IT技术 - react-native：多色文本视图 - 吾爱随笔录

IT技术 reactjs react-native

2021-04-27 13:14:50

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

理想情况下，我会使用带有react的 span 标签来完成。

想知道我将如何对 react-native 做同样的事情？

3个回答

您可以通过使用嵌套的 Text 组件来实现这一点

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

这是文档的链接，可以更好地解释它

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

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>

简单嵌套<Text>元素

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

其它你可能感兴趣的问题