Shoutem 更改默认 fontFamily 不起作用

Posted 2023-02-23

【中文标题】Shoutem 更改默认 fontFamily 不起作用

【英文标题】：Shoutem change default fontFamily not work

【发布时间】：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,
        
    
);

【问题讨论】：

描述问题，只是说你有问题并不能真正帮助我们帮助你。

我做了上面的代码，但我的应用程序中的所有组件仍然不能使用这种字体。我使用 将它们连接到我项目中的所有组件

【参考方案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>
    );
  

【讨论】：

非常感谢兄弟。它对我有用。你拯救了我的一天。