React-Native-Paper 主题不会使用自定义字体

Question

我正在开发一个用于react-native-paper处理主题和 UI 的 RN 应用程序。我有主题来格式化我的组件，但是当我尝试合并自定义字体时，它对组件没有任何影响react-native-paper。我已经关注了，[font guide][1]但它并没有改变这个问题。

我遵循如何使用 加载字体的 expo 示例loadFontAsync()，当我使用 style 道具将这些字体传递到我自己的组件时，fontFamily: 'Rubik-Regular字体可以正常工作，所以我知道这不是字体不存在的问题。

由于我是新手react-native-paper，我认为我的问题出在我的fontConfigor上configureFonts()。任何帮助或指导将不胜感激。

import React from 'react';

import { Provider as ReduxProvider } from 'react-redux'

import configureStore from './store'

]import { configureFonts, DefaultTheme, Provider as PaperProvider } from 'react-native-paper'

import { AppLoading } from 'expo';

import * as Font from 'expo-font';

import AppNavigator from './components/AppNavigator'

const store = configureStore();

const fontConfig = {

    default: {

        regular: {

            fontFamily: 'Rubik-Regular',

            fontWeight: 'normal',

        },

        medium: {

            fontFamily: 'Rubik-Black',

            fontWeight: 'normal',

        },

        light: {

            fontFamily: 'Rubik-Light',

            fontWeight: 'normal',

        },

        thin: {

            fontFamily: 'Rubik-LightItalic',

            fontWeight: 'normal',

        },

    },

};

let customFonts = {

    'Rubik-Regular': require('./assets/fonts/Rubik-Regular.ttf'),

    'Rubik-Black': require('./assets/fonts/Rubik-Black.ttf'),

    'Rubik-Light': require('./assets/fonts/Rubik-Light.ttf'),

    'Rubik-LightItalic': require('./assets/fonts/Rubik-LightItalic.ttf'),

}

const theme = {

    ...DefaultTheme,

    roundness: 30,

    fonts: configureFonts(fontConfig),

    colors: {

        ...DefaultTheme.colors,

        primary: '#0d80d6',

        accent: '#E68FAE',

        background: '#C6E1F2',

    },

}

export default class App extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            fontsLoaded: false,

        };

    }

我正在使用react-native 0.63.3和Expo。

Answer 1

解决方案是您必须指定fontConfig.ios并可能fontConfig.android使其工作，而不仅仅是拥有fontConfig.default.对于您的情况，您可能可以适应类似const _fontConfig = {        regular: {            fontFamily: 'Rubik-Regular',            fontWeight: 'normal',        },        medium: {            fontFamily: 'Rubik-Black',            fontWeight: 'normal',        },        light: {            fontFamily: 'Rubik-Light',            fontWeight: 'normal',        },        thin: {            fontFamily: 'Rubik-LightItalic',            fontWeight: 'normal',        },};const fontConfig = {    ios: _fontConfig,    android: _fontConfig,};