海綿寶寶撒
2023-06-09 10:51:23
我正在開發一個用于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。
1 回答

嚕嚕噠
TA貢獻1784條經驗 獲得超7個贊
解決方案是您必須指定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,
};
添加回答
舉報
0/150
提交
取消