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

Question

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

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

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,
};