react-native:多色文本视图
react-native: multi color text view
我想渲染一行文本,其中一些单词以不同颜色突出显示。
理想情况下,我会使用带有 React 的 span 标签来完成。
想知道我如何用 react-native 做同样的事情?
您可以通过使用嵌套的文本组件来实现此目的
<Text style={{color: 'blue'}}>
I am blue
<Text style={{color: 'red'}}>
i am red
</Text>
and i am blue again
</Text>
这里有一个 link 更好地解释它的文档
你可以做得更好,我的方法:
CText = (props) => <Text style={{color: props.color}}>{props.children}</Text>
内部渲染添加:
const CText = this.CText
和return
<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>
我想渲染一行文本,其中一些单词以不同颜色突出显示。
理想情况下,我会使用带有 React 的 span 标签来完成。
想知道我如何用 react-native 做同样的事情?
您可以通过使用嵌套的文本组件来实现此目的
<Text style={{color: 'blue'}}>
I am blue
<Text style={{color: 'red'}}>
i am red
</Text>
and i am blue again
</Text>
这里有一个 link 更好地解释它的文档
你可以做得更好,我的方法:
CText = (props) => <Text style={{color: props.color}}>{props.children}</Text>
内部渲染添加:
const CText = this.CText
和return
<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>