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

Question

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

我遵循了如何使用 loadFontAsync() 加载字体的 expo 示例，当我使用样式属性 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,
};

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

React-Native-Paper Theme won't use Custom Fonts

javascript

fonts

reactjs

react-native

react-native-paper