我正在尝试使用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/

10-10 23:20
查看更多