1

反応ネイティブの初心者です！私は自分のプロジェクトでshuutem/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,
        }
    }
});

4

1 に答える 1

2

やりたいことは、テーマ変数をオーバーライドすることです。

デフォルトのテーマ変数と 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>
    );
  }
}
于 2017-09-05T15:13:32.580 に答える