我可以在 React Native 应用程序中以编程方式更改样式吗？

Question

我很好奇是否可以在 React Native 中为基于 API 命中结果设置的变量设置样式？

例如

let textColor = 'fake-api-getcolor'

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

然后将 API 端点连接到后端 CMS，我将允许用户在其中选择颜色。

由于应用 build/compile 流程，我不确定这是否可行？

Answer 1

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

Answer 2

是的，这是可能的。

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

Answer 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>
  }

}

Answer 4

在 setState 中动态设置颜色

this.state = {
    backgroundColor: 'blue'
}

我可以在 React Native 应用程序中以编程方式更改样式吗？

Can I programmatically change styling within react native app?

reactjs

react-native

native