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

Question

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

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

由于我是react-native-paper新手，我想我的问题出在我的fontConfig或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,
        };
    }

    async loadFontsAsync() {
        await Font.loadAsync(customFonts);
        this.setState({ fontsLoaded: true });
    }

    componentDidMount() {
        this.loadFontsAsync();
    }

    render() {
        if (this.state.fontsLoaded) {
         return (
                <ReduxProvider store={store}>
                    <PaperProvider theme={theme}>
                        <AppNavigator/>
                    </PaperProvider>
                </ReduxProvider>
            );
        }
        else {
            return <AppLoading/>;
        }
    }
}

​

我使用的是react-native 0.63.3和Expo。

Answer 1

我知道这是不久前的事了，但今天我遇到了同样的问题，并在他们的GitHub上的存储库中发现了这个相关的问题：https://github.com/callstack/react-native-paper/issues/1502#issuecomment-576534682

解决方案是，您必须指定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,
};