似乎无法使用世博会的Font.loadAsync加载自定义字体

Question

我正在将React Native与Expo一起使用，除了自定义字体的一个问题外，一切都进展顺利。我的字体Lobster-Regular.ttf在 ./assets/fonts 中，我一直在尝试加载它，如官方文档中所示：

componentDidMount() {
Font.loadAsync({
'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
});
}

然后，我将标题样式设置为：

headerText: {
color: 'white',
fontSize: 30,
fontFamily: 'Lobster'
}, 

我得到的只是

fontFamily 'Lobster' 不是系统字体，尚未加载 通过 Font.loadAsync。

• 如果您打算使用系统字体，请确保键入的名称正确，并且您的设备操作系统支持该名称。

• 如果这是自定义字体，请确保使用 Font.loadAsync 加载它。

我错过了什么吗？

Answer 1

是的。您缺少呼叫Font.loadAsync()。这意味着它是异步加载的。如：这需要一段时间。在加载字体之前，无法呈现 UI。您需要按照以下行执行一些操作：

import { AppLoading, Font } from 'expo'
state = {
fontsLoaded: false,
...
}
componentWillMount() {
Font.loadAsync( {
'Lobster': require('./assets/fonts/Lobster-Regular.ttf')
}
).then( () => this.setState( { fontsLoaded: true } ) )
}
render() {
if( !this.state.fontsLoaded ) {
return <AppLoading/>
}
return (
...
)
}

Answer 2

Font.loadAsync 很旧，并且被证明存在不可预测的问题。 现在世博会在这里推出了新的解决方案

所以现在正确的代码是：

import {useFonts} from 'expo-font';
import AppLoading from "expo-app-loading";
let [fontsLoaded] = useFonts({
'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
});
if (!fontsLoaded) {
return <AppLoading/>;
}
...

Answer 3

从expo CLI安装expo字体包，因为有时expo字体版本与您的expo版本不兼容，所以，

第 1 步：

expo install expo-font

第 2 步：

class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
this.loadAssetsAsync();
}
async loadAssetsAsync() {
await Font.loadAsync({
// Load a font `Montserrat` from a static resource
MuseoSans500: require("./assets/fonts/museosans_500-webfont.ttf"),
MuseoSans700: require("./assets/fonts/museosans_700-webfont.ttf"),
});
this.setState({ fontLoaded: true });
}
render() {
if (!this.state.fontLoaded) {
return null; // render some progress indicator
}
return <AnyComponent />;
}
}

Answer 4

** 无状态函数中的反应原生字体 **

**

步骤：1 从世博会导入字体 **

import * as Font from 'expo-font';
import { AppLoading } from 'expo';

*

步骤2：需要文件中的字体*

// fetchFonts from local files type ttf 
const fetchFonts = () => {
return Font.loadAsync({
'PacificoRegular': require('../assets/Pacifico/Pacifico-Regular.ttf'),
});
};

*****step3:use state  *****

// state font fetch control 
const [fontloaded,setfontloaded]=useState(false);

**

步骤4：使用加载的应用程序**

if(!fontloaded){
return(
<AppLoading
startAsync={fetchFonts}
onFinish={()=>{setfontloaded(true)}}
onError={console.warn}/>
)
}

**

步骤5：样式字体**

txt:{
padding:5,
fontSize:18,
fontFamily: 'PacificoRegular',
}

Answer 5

useEffect(()=>{
async function loadFonts(){
await Font.loadAsync({
'Montserrat': require("./assets/fonts/Montserrat/Montserrat-Regular.ttf"),
'Montserrat-SemiBold': require('./assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
'Montserrat-Bold': require('./assets/fonts/Montserrat/Montserrat-Bold.ttf'),
'Fascinate': require('./assets/fonts/Fascinate/Fascinate-Regular.ttf')
}).then(res=>{
console.log("FONTS LOADED!");
setLoaded(true)
}).catch(Err=>{
setLoaded(true);
console.log(Err);
}); 
}
loadFonts();
},[])

在您的 App.js 文件中使用此 useEffect 加载，加载后，字体可以在您的博览会或 react-native 项目的任何地方使用

const Heading = (color) => {
return({fontSize:45*fontScale, fontFamily: "Montserrat-SemiBold", color, marginTop: -10, marginLeft: InitialMargin, letterSpacing: 4})
}

确保您没有使用样式 fontWeight，因为它将覆盖 fontStyle，并且不会将 fontFamily 应用于您的文本。

Answer 6

Because 'startAsync' is depreacted from the component AppLoading,
we can use coustom fonts as bellow,
This code works fine.
I think <Apploading> causes no further instructions to be
performed until the font is loaded       

===============================================

import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React ,{useState}from 'react';
export default function App() {
const [fontLoading,setFontLoading]=useState(false);

Font.loadAsync( {
yekan:require("./myapp/fonts/byekan.ttf"),
ih:require("./myapp/fonts/ih.ttf")
}
).then( () => setFontLoading('true') )


if (!fontLoading){
return(
<AppLoading/>);

} else{
return(
do someting.....
............
) 
}