React Native Expo中未加载字体

Question

(抱歉，英语不是第一语言(

我加载了我的字体，但当我尝试使用它们时，它会说字体不是字体，我需要使用font.loadAsync

我已经在APP((中加载了它们：

import * as Font from "expo-font";
import AppLoading from "expo-app-loading";
import React, { useState } from "react";
import { Actions, Router, Scene } from "react-native-router-flux";

export default function App() {

const fetchFonts = () => {
return Font.loadAsync({
"Montserrat-Bold": require("./assets/fonts/Montserrat-Bold.ttf"),
"Montserrat-Medium": require("./assets/fonts/Montserrat-Medium.ttf"),
"Montserrat-Regular": require("./assets/fonts/Montserrat-Regular.ttf"),
"Montserrat-SemiBold": require("./assets/fonts/Montserrat-SemiBold.ttf"),
"MyriadPro-Regular": require("./assets/fonts/MyriadPro-Regular.otf"),
});
};

const [fontLoaded, setFontLoaded] = useState(false);

if (!fontLoaded) {
return (
<AppLoading
startAsync={fetchFonts}
onFinish={(setFontLoaded(true)}
onError={(console.warn}
autoHideSplash={false}
/>
);
} else {
return (
<Router styles={styles.container}>
...
</Router>
);
}
}

我在另一个屏幕上使用样式中的字体，如下所示：

text: {
textAlign: "center",
padding: 20,
fontFamily: "Montserrat-Bold",
},

错误：

iPhone 8(模拟器(错误

fontFamily "Montserrat-Bold" is not a system font and has not been loaded through Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Font.loadAsync.
at node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at [native code]:null in performSyncWorkOnRoot
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication
at [native code]:null in callFunctionReturnFlushedQueue

Answer 1

将fetchFonts更改为此

const fetchFonts = async () => {
await Font.loadAsync({
"Montserrat-Bold": require("./assets/fonts/Montserrat-Bold.ttf"),
"Montserrat-Medium": require("./assets/fonts/Montserrat-Medium.ttf"),
"Montserrat-Regular": require("./assets/fonts/Montserrat-Regular.ttf"),
"Montserrat-SemiBold": require("./assets/fonts/Montserrat-SemiBold.ttf"),
"MyriadPro-Regular": require("./assets/fonts/MyriadPro-Regular.otf"),
});
};

和你的if/else到这个

if (!fontLoaded) {
return (
<AppLoading
startAsync={fetchFonts}
onFinish={() => setFontLoaded(true)}
onError={(console.warn}
/>
);
} else {
return (
<Router styles={styles.container}>
...
</Router>
);
}

并在fetchFonts函数之上声明您的状态，以使代码清除

---

loadFonts的另一个非常干净的方法是创建一个名为hooks的文件夹，App.js位于

然后在hooks文件夹中创建一个名为useFonts.js的文件

在useFonts.js内部像这样写

import * as Font from "expo-font";
export default useFonts = async () => {
await Font.loadAsync({
"Montserrat-Bold": require("../assets/fonts/Montserrat-Bold.ttf"),
"Montserrat-Medium": require("../assets/fonts/Montserrat-Medium.ttf"),
"Montserrat-Regular": require("../assets/fonts/Montserrat-Regular.ttf"),
"Montserrat-SemiBold": require("../assets/fonts/Montserrat-SemiBold.ttf"),
"MyriadPro-Regular": require("../assets/fonts/MyriadPro-Regular.otf"),
});
};.

现在在你的App.js中这样写

import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';
import { Actions, Router, Scene } from 'react-native-router-flux';
import useFonts from './hooks/useFonts';
export default function App() {
const [IsReady, SetIsReady] = useState(false);
const LoadFonts = async () => {
await useFonts();
};
if (!IsReady) {
return (
<AppLoading
startAsync={LoadFonts}
onFinish={() => SetIsReady(true)}
onError={() => {}}
/>
);
}
return <Router styles={styles.container}>{/* Code Here */}</Router>;
}