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

Question

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

我遵循如何使用loadFontAsync() 加载字体的博览会示例，当我使用样式属性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

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