【问题标题】:Shoutem change default fontFamily not workShoutem 更改默认 fontFamily 不起作用
【发布时间】:2017-09-05 12:02:42
【问题描述】:

我是 React Native 的新手!我在我的项目中使用了shoutem/ui。 修改默认 fontFamily 时出现问题。这是我的代码,请检查然后帮我解决这个问题。 非常感谢大家。

const theme = _.merge(getTheme(), {
    defaultFont: {
        fontFamily: 'Rubik-Italic',
      },
    'shoutem.ui.NavigationBar': {
        '.clear': {
            container: {
                backgroundColor: params.primaryColor,
                borderBottomColor: 'transparent',
                position: 'relative',
            },
            'shoutem.ui.Title': {
                color: 'white',
                fontSize: 16,
            },
        },
        '.normal': {
            container: {
                position: 'relative'
            },
            'shoutem.ui.Button': {
                'shoutem.ui.Icon': {
                    color: params.colorTextAlpha,
                },
                'shoutem.ui.Text': {
                    color: params.colorTextAlpha,
                },
            },
            'shoutem.ui.Title': {
                color: params.colorText,
            },
        }
    },
    'shoutem.ui.Row': {
        '.fix': {
            paddingHorizontal: 10,
            paddingVertical: 10,
        }
    }
});

【问题讨论】:

  • 描述问题,只是说你有问题并不能真正帮助我们帮助你。
  • 我做了上面的代码,但我的应用程序中的所有组件仍然不能使用这种字体。我使用 将它们连接到我项目中的所有组件

标签: javascript react-native shoutem


【解决方案1】:

您想要做的是覆盖主题变量。

导入默认主题变量和getTheme函数:

import {
  getTheme,
  defaultThemeVariables,
} from '@shoutem/ui';

然后定义您的自定义变量:

const myThemeVariables = {
...defaultThemeVariables,
  title: {  fontFamily: 'MyFont' },
};

然后定义使用这些变量的自定义主题:

const myTheme = getTheme(myThemeVariables);

没有更多可以覆盖的defaultFont 设置,因此很遗憾您必须具体说明。

此外,您必须导入 StyleProvider:

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

并用它来控制组件的样式:

render() {
    return (
      <StyleProvider style={myTheme}>
        // your components here
      </StyleProvider>
    );
  }
}

【讨论】:

  • 非常感谢兄弟。它对我有用。你拯救了我的一天。
猜你喜欢
  • 1970-01-01
  • 2018-09-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-01-04
  • 2021-05-31
  • 2023-04-10
  • 2012-06-03
相关资源
最近更新 更多