动态更改颜色和图标，而无需重置应用程序

如何解决动态更改颜色和图标，而无需重置应用程序

在我的应用中，我使用了这样的主题系统。

我有一个Images.js文件，其中包含具有require的对象。我正在使用图像文件作为图标。

例如，对于标题，我有类似的内容

const imagesHeader = {back: require("path/back_icon.png"),next: require("path/next_icon.png")}等。

但是现在我还需要一个黑暗的主题。为此，我在app存储区中保存了一个可观察变量。顺便说一句，我使用MobX进行状态管理。我有一个名为app的商店，并且有一个名为theme的可观察变量，如下所示：@persist @observable theme = "light"，其默认值为light。

但是，在RN中，我意识到，在初始化组件时，一旦需要使用图标作为图像，便无法动态更改它而不重置应用程序。为此，我决定制作每张图片getter function，例如：

首先，我将所有图像捕获到一个名为allImages的对象中

const allImages = { 
   light mode ->     light:{
                            back: require("path/light/back_icon.png"),next: require("path/light/next_icon.png")},dark mode ->      dark:{
                            back: require("path/dark/back_icon.png"),next: require("path/dark/dark/next_icon.png"),};

之后，我从商店中获取变量，然后像这样返回

   const getTheme = () => getStores().app.theme; <- returns "light/dark" (string)

最后在imagessHeader中，而不是像上面那样使用require，我使用像这样：

const imagesHeader = {
            get back(){ return allImages[getTheme()].back
            get next(){ return allImages[getTheme()].next
                     };

我也遵循相同的颜色逻辑，不仅是图标图像。我为每种颜色创建了getter方法，就像我在这里为每种图标创建了getter方法一样！

但是问题是现在，我认为它正在尝试在商店实际初始化之前从商店中请求我的theme变量。因为我总是在类/功能组件之外创建样式定义。但是MobX商店会在实际组件初始化时初始化，这意味着在初始化组件时我可以达到theme的值。否则，我会收到theme is undefined错误。我也为此进行了一些研究，并找到了一种方法，因此，如果将styles定义转换为函数，则实际上是在等待组件初始化。如您所知，通常我们会这样定义样式：

const styles = StyleSheet.create({});

这不起作用，

const styles = () => StyleSheet.create({});

这正在工作。但是，如果要转换整个项目中包含600多个文件的所有样式，则需要在styles().something之类的标记中使用样式，而不是styles.something。

实际上，一切正常，但是我的主要问题是从您那里获得更好的想法，因为我不想花时间在编辑600多个文件时：（

如果有更好的方法可以解决这个问题，或者如果有一种方法可以初始化我的MobX商店，那么您将不知道这些组件。也许有更好的逻辑来处理这些问题。

谢谢！