Блог

В моем приложении я использовал такую систему для тематизации.

У меня есть Images.js файл, который содержит объекты с требованиями. Кстати, я использую файлы изображений в качестве значков.

Например, для заголовка у меня есть что-то вроде,

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)
  

и, наконец, в imagesHeader вместо использования require, как указано выше, я использую like:

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

Я следовал той же логике и для цветов, а не только для изображений значков. Я создал метод получения для каждого отдельного цвета так же, как я создал getter для каждого отдельного значка здесь!!

Но проблема в том, что сейчас, я думаю, он пытается запросить мою theme переменную из хранилища, прежде чем хранилище фактически инициализируется. Потому что я всегда создавал определения стилей вне класса / функциональных компонентов. Но MobX хранилище инициализируется во время фактической инициализации компонента, что означает, что я могу получить theme значение при инициализации компонента. В противном случае я получаю theme is undefined ошибку. Я также провел некоторые исследования для этого и нашел способ, поэтому, если я преобразую свои styles определения в функции, это фактически ожидает инициализации компонента. как вы знаете, обычно мы определяем стили следующим образом:

 const styles = StyleSheet.create({});
  

Это НЕ работает,

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

Это работает.
Но если я конвертирую все стили во всем проекте, который содержит более 600 файлов, мне нужно использовать стили в таких тегах, как styles().something вместо styles.something .

На самом деле все работает нормально, но мой главный вопрос, чтобы получить от вас лучшие идеи, потому что я не хочу тратить свое время на редактирование более 600 файлов:(

Если есть лучший способ справиться с этим или если есть способ инициализировать мои MobX хранилища перед компонентами, было бы здорово узнать. Или, может быть, есть лучшая логика для обработки этих вещей.

Спасибо!