我正在尝试使用React Native在App上呈现Text内容。文本内容是从服务器加载的。除了内容本身之外,网络响应还告诉我那些单词索引应该以不同的颜色呈现。
例如:
// from the response JSON, I can tell:
contentString='How can we dynamic render text in multiple colors?'
index=[1, 3, 5]
我需要在应用程序上以黑色呈现
contentString
,并以黄色呈现can
(索引1),dynamic
(索引3)和text(index 5)
。我对此进行了一些研究,发现“嵌套文本”将是一个解决方案。喜欢:
<Text style={{color: 'black'}}>
how
<Text style={{color: 'yellow'}}>
can
</Text>
we
<Text style={{color: 'yellow'}}>
dynamic
</Text>
.......
</Text>
索引数组与每个请求不同。我尽力编写一个函数来支持这种动态多色渲染,但是没有运气。我仍在学习算法,此功能似乎太有挑战性了。
谁能对此有所启发?非常感谢!
最佳答案
你可以做这样的事情。
<Text style={{color: 'black'}}>
{contentString.split(" ").map((x, ind) =>
<Text style={{color: index.includes(ind)?'black':'yellow'}}>
{x+ " "}
</Text>)
}
</Text>
Live Demo Here
关于javascript - React Native:以多种颜色动态打印文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56910600/