0

我真的很喜欢shoutem 主题库，但我发现很难连接到使底层代码完美运行的递归INCLUDE（请参阅此处的代码+文档：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',
    },
});

这种简单的文本颜色更改将起作用，但仅适用于 sayem Text 组件。但是，由于 INCLUDE，Heading、Title、Subtitle 等都是从ushem 库中的Text 属性中提取的。使用简单的 _.merge(...) 只会覆盖组件本身，但不会覆盖它随后可能影响的任何内容。听起来我需要覆盖树中较高的属性（例如，文本），然后重新生成主题，以便它影响它包含的所有“子项”（例如，标题和标题）。使用公开的 API，目前是否有可能做到这一点？或者是否有任何你知道的叉子或实用程序可以通过你的库来实现这一点。

4

1 回答 1

2

text默认的shoutem ui 主题的根目录中有一个属性，它包含在所有文本元素中（ 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）。

于 2017-04-03T21:24:23.687 回答