Expo fontello 无法加载答案

【问题标题】：Expo fontello don't loadExpo fontello 无法加载
【发布时间】：2021-06-22 14:23:50
【问题描述】：

我正在尝试在我的项目中加载 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 加载它。

【问题讨论】：

标签： react-native expo fontello vector-icons

【解决方案1】：

安装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>
   );
}

Working Example 适用于安卓系统。网页版中的一些错误。

【讨论】：