[英]Expo fontello don't load
我正在嘗試在我的項目中加載 fontello 圖標,但是如果我嘗試在 App.js 中加載,它會發送“false”並且應用程序不會加載:
import React, {useState} from "react"; import AppLoading from "expo-app-loading"; import { ThemeProvider } from "styled-components"; import theme from "./src/globalStyles/theme"; import Routes from "./src/routes"; import { useFonts, Roboto_400Regular, Roboto_500Medium, Roboto_700Bold, } from "@expo-google-fonts/roboto"; import { Fontello } from "./assets/fonts/fontello.ttf"; export default function App() { const [fontsLoaded] = useFonts({ Roboto_400Regular, Roboto_500Medium, Roboto_700Bold, Fontello, }); console.log(fontsLoaded) if (!fontsLoaded) { return <AppLoading />; } return ( <ThemeProvider theme={theme}> <Routes /> </ThemeProvider> ); }
如果我用 Fontello 注釋該行,它會加載應用程序,但出現以下錯誤:
fontFamily "fontello" 不是系統字體,還沒有通過 Font.loadAsync 加載。
如果您打算使用系統字體,請確保您輸入的名稱正確並且您的設備操作系統支持它。
如果這是自定義字體,請務必使用 Font.loadAsync 加載它。
安裝expo-font
expo install expo-font
在App.js
所在的位置創建一個名為hooks
的文件夾。
在hooks
文件夾中創建一個名為useFonts.js
的文件,粘貼此代碼
useFonts.js
import * as Font from 'expo-font';
import { Roboto_400Regular } from '@expo-google-fonts/roboto';
const useFonts = async () => {
await Font.loadAsync({
Roboto: Roboto_400Regular,
Fontello: require('../assets/fonts/fontello.ttf'),
// All Other Fonts
});
};
export default useFonts;
然后在您的App.js
粘貼此代碼
import React, { useState } from 'react';
import AppLoading from 'expo-app-loading';
import { ThemeProvider } from 'styled-components';
import theme from './src/globalStyles/theme';
import Routes from './src/routes';
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={(error) => console.log(error)}
/>
);
}
return (
<ThemeProvider theme={theme}>
<Routes />
</ThemeProvider>
);
}
工作示例適用於 Android。 網絡版中的一些錯誤。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.