Question

我正在尝试使用React Native在App上呈现文本内容。文本内容是从服务器加载的。除了内容本身之外，网络响应还告诉我这些单词索引应该以不同的颜色呈现。

例如：

// 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>

索引数组与每个请求不同。我尽力编写一个函数来支持这种动态多色渲染，但是没有运气。我仍在学习算法，此功能似乎太有挑战性了。

有人能对此有所启发吗？非常感谢！

Answer 1

您可以做这样的事情。

 <Text style={{color: 'black'}}>
     {contentString.split(" ").map((x, ind) => 
           <Text style={{color: index.includes(ind)?'black':'yellow'}}>
            {x+ " "}
           </Text>)
      }
 </Text>

Live Demo Here

Answer 2

在渲染中创建颜色数组
用于每次获取随机数的随机函数
您在backColor数组中传递了随机数。颜色数组的索引

render() {

var backColor = ["#c36a2d", "#afa939", "#60204b", "#ca3e47", "#f7b71d", "#f36886", "#614ad3", "#0c99c1", "#4e3440", "#010059"];
const rand = Math.floor(Math.random() * 9) + 1;

    return (
       <Text style={{color: 'black'}}>
         {contentString.split(" ").map((x, ind) => 
             <Text style={{color: backColor[rand]}}>
              {x+ " "}
             </Text>)
          }
      </Text>
   )
}

React Native：以多种颜色动态打印文本

2 个答案: