Question

我真的很喜欢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',
    },
});

这个简单的文本颜色更改将起作用，但仅用于shoutem Text组件。但是，Heading，Title，Subtitle等等都是因为INCLUDE而从shoutem库中的Text属性中提取的。使用简单的_.merge（...）只会覆盖组件本身，但不会覆盖它可能随后影响的任何内容。听起来我需要覆盖树中较高的属性（例如，文本），然后重新生成主题，以便它影响所有＆＃34;孩子＆＃34;它包含在（例如，标题和标题）中。使用公开的API，目前可能以某种方式做到这一点吗？或者您有任何叉子或实用程序可以通过您的库实现这一目标。

Answer 1

默认shoutem ui主题的根目录中有一个#include <stdio.h> int main(int argc, const char *argv[]) { for (int i=0; i<argc; i++) { printf("%s\n",argv[i]); } return 0; }属性，该属性包含在所有文本元素（https://github.com/shoutem/ui/blob/develop/theme.js#L292）中。您应该能够通过简单地覆盖该属性的值来完成您的用例：

text

如果您想要创建更复杂的主题，您也可以在代码中使用const theme = _.merge(getTheme(), { text: { color: 'green', }, });。 INCLUDE通过合并其定位的顶级主题属性中的所有值来工作。您可以使用它来包含基本主题中的属性，还可以包含您自己的自定义属性：

INCLUDE

有时，特定组件在解析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', }, });帮助程序：

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', }, });（https://github.com/shoutem/ui/blob/develop/theme.js#L55-L144）时传递自定义变量。

如何使用正确使用底层INCLUDE的Shoutem的StyleProvider制作自定义主题

1 个答案: