Dynamic 如何在react native中实现用户可选择的主题/样式？

如果用户选择了“亮”主题，并切换到“暗”主题，则所有场景将立即渲染为使用“暗”主题

如果这有帮助，我正在使用react native router flux

---

提前感谢，

您可以从创建一个JS文件开始，该文件包含两个具有每个主题颜色的对象。然后只使用一个作为默认值，如果用户选择了另一个主题，则将其保存在数据库中或使用本地存储并提取相关对象

export const theme1 = {
     blue: '#fddd',
     red: '#ddddd',
     buttonColor: '#fff'
 }

export const theme2 = {
     blue: '#fddd',
     red: '#ddddd'
     buttonColor: '#fff'
 }

然后只需导入相关文件：

import * as themes from 'Themes'
const currentTheme = this.props.currentTheme ? this.props.currentTheme : 'theme1'

const styles = StyleSheet.create({
   button: {
     color: themes[currentTheme].buttonColor
   },

})

---

不同的方法是可能的。其中之一是使用React。通常应谨慎使用，但主题化是适用的官方示例之一

主题化是一个很好的例子，说明您可能希望整个子树能够访问某些信息

所以这个例子可能看起来像

class App extends Component {
  getChildContext() {
    return {theme: { primaryColor: "purple" }};
  }
  ...
}
App.childContextTypes = {
  theme: React.PropTypes.object
};

为应用程序的其余部分设置上下文，然后在组件中使用它

class Button extends Component {
  render() {
    return <TouchableHighlight underlayColor={this.context.theme.primaryColor}>...
  }
}
Button.contextTypes = {
  theme: React.PropTypes.object
};

class按钮扩展组件{
render（）{
返回。。。
}
}
Button.contextTypes={
主题：React.PropTypes.object
};

如果您想切换主题，您可以根据您的状态/道具设置上下文，而这些状态/道具可以基于用户选择

目前，我们正在处理相同的问题，因此，我们已经开始原型库称为

其思想是使用上下文来存储主题，并（重新）实现RN组件，以便它们可以替换原始组件，但支持主题化

---

您可以在

中找到主题切换的示例如果您可以直接导入一个颜色对象，并在每次更改主题时修改该对象，并将这些新颜色传播到整个应用程序，这不是很好吗？那么您的组件就不需要任何特殊的主题逻辑。我能够通过结合使用异步存储、强制应用程序重启和异步模块加载来实现这一点。

React-context方法很有趣。其他方法，如react native material kit和似乎采用了可主题的组件方法。我想这对新的应用程序开发是有好处的。对于现有的应用程序来说，情况并非如此。React-context方法有效。我会看看我是否能使它动态变化。非常感谢你！这似乎不适用于多个子组件deep？没关系，我正在阅读链接，我很难理解如何通过react本机路由器流量组件传递它？当场景声明子组件Yes时，其他LIB也使用上下文方法。但正如你所说，从零开始使用LIB更好。但你可以开始实现自己的上下文解决方案，并逐步升级你的组件，使其具有上下文意识。在你的应用程序启动代码中，主题只选择一次。使用此方法，应用程序无法在运行中重新发布新主题。嗨，Rarecandy，欢迎使用SO！我们喜欢这里的细节，因此请在您的回答上进一步详细说明。例如，粘贴您使用的代码或写出您所经历的步骤（例如，您在GUI中单击了哪些菜单选项，按什么顺序）以解决OP的问题。理想情况下，使用OP的最小工作示例（如果他们提供了一个）。试着让OP尽可能容易地复制你的步骤，并评估你的答案是否解决了他们的问题。