我可以在反应原生应用程序中以编程方式更改样式吗？答案

【问题标题】：Can I programmatically change styling within react native app?我可以在反应原生应用程序中以编程方式更改样式吗？
【发布时间】：2019-03-20 04:10:50
【问题描述】：

我很好奇是否可以设置一个样式以响应原生到基于 API 命中结果设置的变量？

例如

let textColor = 'fake-api-getcolor'

<text style={{color: textColor}}>Hello</text>

然后将该 API 端点连接到我允许用户选择颜色的后端 CMS。

由于应用程序构建/编译过程，我不确定这是否可能？

【问题讨论】：

标签： reactjs react-native native

【解决方案1】：

是的，这是可能的。

您只需将其视为任何普通对象并将其用于您的值或样式。有关完整说明，请参阅here。

【讨论】：

太棒了，谢谢。我对 React 非常熟悉，但只是想学习 React Native，所以我想我过度思考编译后可编辑的内容......
@TravisJames 是的，你可能是。所有属性都是运行时可绑定的，因此您不必考虑太多编译时间。这也是热重载功能如此出色的原因。

【解决方案2】：

如果您获取该值然后在每次后端更改时设置变量，这是完全可能的。我的意思是，是的，您可以在样式中包含计算值。

【讨论】：

【解决方案3】：

你可以使用状态来做到这一点

class AppComponent extends React.Component {

  state = {
    textColor: "red"
  }


  async changeColor() {
    const color = "blue" //Here you can fetch color from your api then call setState like below
    this.setState({
      textColor: color
    })
  }


  render() {
    const {
      textColor
    } = this.state;
    return <text style={{color: textColor}}>Hello</text>
  }

}

【讨论】：

【解决方案4】：

在 setState 中动态设置颜色

this.state = {
    backgroundColor: 'blue'
}

【讨论】：