Как сделать собственную тему, используя Shoutem's StyleProvider, который правильно использует базовый INCLUDE

Question

Я действительно люблю библиотеку тем shoutem, но мне трудно подключиться к рекурсивному ВКЛЮЧЕНИЮ, который прекрасно работает с базовым кодом (см. Код + документация здесь: https://github.com/shoutem/theme/blob/develop/src/Theme.js). Например, если у нас есть:

render() {
    return (
        <StyleProvider style={theme}>
            <View />
        </StyleProvider>
    );
}

const theme = _.merge(getTheme(), {
    'shoutem.ui.Text': {
        color: 'green',
    },
});

Это простое изменение цвета текста будет работать, но только для текстовых компонентов shoutem. Однако заголовок, заголовок, субтитры и т. Д. Все они извлекаются из атрибутов текста в библиотеке shoutem из-за включения. Использование простого _.merge(...) только перезаписывает сам компонент, но не все, на что оно может впоследствии повлиять. Похоже, мне нужно переписать атрибуты выше в дереве (например, текст), а затем заново создать тему, чтобы она влияла на всех "потомков", в которые она включена (например, заголовок и заголовок). Используя публично представленный API, возможно ли это как-то сделать в данный момент? Или есть какие-то вилки или утилиты, о которых вы знаете, которые выполняют это с вашей библиотекой.

Answer 1

E сть text свойство в корне темы пользовательского интерфейса shoutem по умолчанию, которое включено во все текстовые элементы ( https://github.com/shoutem/ui/blob/develop/theme.js#L292). Вы должны быть в состоянии выполнить ваш вариант использования, просто переопределив значения из этого свойства:

const theme = _.merge(getTheme(), {
  text: {
    color: 'green',
  },
});

Если вы хотите создать более сложную тему, вы можете использовать INCLUDE в вашем коде, а также. INCLUDE работает путем слияния всех значений из свойств темы верхнего уровня, на которые она нацелена. Вы можете использовать его для включения свойств из базовой темы, а также вы можете включить свои собственные пользовательские свойства:

import { INCLUDE } from '@shoutem/theme';

const theme = _.merge(getTheme(), {
  // Define a top level property to use in includes
  largeText: {
    fontSize: 20,
  },
  'shoutem.ui.Text': {
    // Include a text property from the base theme
    // and a largeText property defined above
    [INCLUDE]: ['text', 'largeText'],

    // Override the text color after all includes
    // have been resolved
    color: 'green',
  },
});

Иногда определенные компоненты определяют стили после разрешения INCLUDE, эти стили имеют более высокий приоритет и всегда будут переопределять стиль из INCLUDE. Чтобы изменить эти стили, вы можете использовать createSharedStyle помощник:

import { createSharedStyle } from '@shoutem/theme';

const textComponents = [
  'shoutem.ui.Heading',
  'shoutem.ui.Title',
  'shoutem.ui.Subtitle',
  'shoutem.ui.Text',
  'shoutem.ui.Caption',
];

const theme = _.merge(getTheme(), {
  ...createSharedStyle(textComponents, {
    color: 'green',
  },
});

Наконец, с помощью переменных темы можно выполнить некоторые более простые настройки, при вызове которых вы можете передавать пользовательские переменные. getTheme( https://github.com/shoutem/ui/blob/develop/theme.js#L55-L144).