我可以在React Native中制作动态样式吗？

Question

说我有一个带有这样的渲染的组件：

<View style={jewelStyle}></View>

其中jewelStyle =

  {
    borderRadius: 10,
    backgroundColor: '#FFEFCC',
    width: 20,
    height: 20,
  },

如何使背景颜色动态并随机分配？我试过了

  {
    borderRadius: 10,
    backgroundColor: getRandomColor(),
    width: 20,
    height: 20,
  },

但这会使View的所有实例具有相同的颜色，我希望每个实例都是唯一的。

有小费吗？

Answer 1

我通常按​​照以下方式进行操作：

<View style={this.jewelStyle()} />

…

jewelStyle = function(options) {
   return {
     borderRadius: 12,
     background: randomColor(),
   }
 }

每次渲染View时，都会使用与之关联的随机颜色实例化一个新样式对象。当然，这意味着每次重新渲染组件时颜色都会改变，这也许不是您想要的。相反，您可以执行以下操作：

var myColor = randomColor()
<View style={jewelStyle(myColor)} />

…

jewelStyle = function(myColor) {
   return {
     borderRadius: 10,
     background: myColor,
   }
 }