我正在使用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
。
答案 0 :(得分: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,
};