我正在将 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 加载它。
我错过了什么吗？
是的。你错过了电话是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 (
...
)
}
从expo CLI安装expo-font包，因为有时 expo-font 版本与您的 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 />;
}
}
** 在无状态功能中react-native字体 **
**步骤：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',
}
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/>;
}
...