React Native 在 color.js 配置文件中更改颜色值以更改主题？答案

【问题标题】：React Native change color value in color.js config file to change theme?React Native 在 color.js 配置文件中更改颜色值以更改主题？
【发布时间】：2018-03-13 18:58:44
【问题描述】：

我正在尝试完成以下操作：用户单击一个按钮，该按钮更改我的应用程序的原色以反映按钮的颜色，（用户单击蓝色按钮，然后主题从当前颜色切换为蓝色）

目前我的所有样式都在我的 colors.js 中，所有颜色都存储在一个对象中：

export default {
  primary: 'red',
  dark: '#212121',
  ...
  ...
  ...
};

当我想使用对象中的颜色时，我只需将文件导入所需的组件，然后设置颜色，我会这样做：

container: {
  backgroundColor: colors.primary,
}

我认为我应该使用状态来切换颜色然后将值存储在 AsyncStorage 中，但我不知道在哪里设置它。任何解决方案的指导将不胜感激！

【问题讨论】：

标签： reactjs dynamic colors themes native

【解决方案1】：

您需要根据您的按钮单击设置此颜色会改变状态。因此，创建一个 bool 变量，如下所示

state = {
    isButtonPress: false
}

现在，假设您的按钮按下将调用方法名称为 buttonPress，因此通过调用 setState 方法更新其中 isButtonPress 的值：

buttonPress = () => {
    this.setState({isButtonPress: !isButtonPress})
}

此代码将在按钮按下时将 isButtonPress 的值交替更改为 true 和 false。

现在在您的 UI 部分，只需为您的视图更新如下代码

<View style={container, {backgroundColor: this.state.isButtonPress ? colors.primary : colours.dark />

我希望这能解决您的问题。由于使用了状态变量，因此每次单击按钮时都会运行此代码。

【讨论】：

非常感谢您的回复，问题是将有超过两种颜色/主题可供选择。另外，我认为我不能使用状态，因为需要在多个页面上更改背景（每个页面都会更新新的 primaryColor。我应该更清楚，我的道歉。我正在寻找的方式就是这样 - 如果我可以更改 colors.js 中的颜色值，那么这将更新每个页面上的原色。再次感谢！

【解决方案2】：

你可以而且应该使用状态。

你的状态可以定义为

this.state = {
 colorObjectType: "primary"
}

然后单击按钮，您可以定义要设置状态的属性， this.setState({colorObjectType: "myProperty"}).

您可以将您的风格定义为<MyComponent style={{backgroundColor: colors[this.state.colorObjectType]}} />

F.Y.I - 一个 javascript 对象一旦声明，就可以通过两种方式访问

this.state.colorObjectType
this.state["colorObjectType"]

【讨论】：

我明白你在说什么，这对我来说很清楚。我唯一想弄清楚的是我需要在哪个组件中执行此操作。我很困惑，因为我有很多组件需要从那个状态调用切换背景颜色？我应该使用 Redux 这样做吗？谢谢阿西姆。
在我看来，您应该为每个组件维护一个包含所有颜色映射的状态。然后可能创建一个参数化函数，该函数将组件名称作为参数并使用该参数设置特定状态的样式。希望这会有所帮助:) @hnicastro
嘿阿西姆。我现在正在使用 Redux 正确创建我的状态，因此我可以在需要应用此颜色的所有组件中使用全局状态。我有正确分配颜色值，但是当我将 this.props.theme 添加到我的样式对象时，我收到一条错误消息，指出该值未定义。我知道这不是因为当我在 Text 标签中输出状态时，我得到了正确的值，它是一个十六进制值（应该在样式中工作）。你会碰巧知道为什么这是一个问题吗？我唯一能想到的就是因为该值没有包含在字符串中。我尝试添加 .ToString()。