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,

};