字体正在加载，但我需要使用 Font.loadAsync

Question

我正在尝试使用 expo 向 ReactNative 添加自定义字体字体现在实际上显示正常，但我不断收到警告，我应该使用 Font.loadAsync，我尝试将文档中的内容调整为选项卡式模板，并观看了一些教程，最近是 Maximillian 的Udemy 感觉最接近.. 但即使我使用 Font.loadAsync 我仍然收到相同的警告。

Repo, Tabs Template with Custom Fonts

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';

// expo install expo-app-loading
import AppLoading from 'expo-app-loading';
// import { AppLoading } from 'expo';

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

const fetchFonts = () => {
  return Font.loadAsync({
    'CharterBold': require('./assets/fonts/CharterBold.otf'),
    'CharterBoldItalic': require('./assets/fonts/CharterBoldItalic.otf'),
    'CharterItalic': require('./assets/fonts/CharterItalic.otf'),
    'CharterRegular': require('./assets/fonts/CharterRegular.otf'),
    'SpaceMono': require('./assets/fonts/SpaceMono-Regular.ttf'),
  })
}

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();
  const [fontsLoaded, setFontsLoaded] = useState(false)

  // const [loaded] = useFonts({
  //   CharterBold: require('./assets/fonts/CharterBold.otf'),
  //   CharterBoldItalic: require('./assets/fonts/CharterBoldItalic.otf'),
  //   CharterItalic: require('./assets/fonts/CharterItalic.otf'),
  //   CharterRegular: require('./assets/fonts/CharterRegular.otf'),
  //   SpaceMono: require('./assets/fonts/SpaceMono-Regular.ttf'),
  // });

  if (!fontsLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }
  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

Answer 1

在您的 App.js 所在的位置创建一个名为 hooks 的文件夹。

在其中创建一个名为 useFonts.js

的文件

你的 useFonts.js 应该是这样的 -

import * as Font from "expo-font";

const useFonts = async () => {
  await Font.loadAsync({
    CharterBold: require("./assets/fonts/CharterBold.otf"),
    CharterBoldItalic: require("./assets/fonts/CharterBoldItalic.otf"),
    CharterItalic: require("./assets/fonts/CharterItalic.otf"),
    CharterRegular: require("./assets/fonts/CharterRegular.otf"),
    SpaceMono: require("./assets/fonts/SpaceMono-Regular.ttf"),
  });
 }

export default useFonts;

现在你的 App.js 应该是这样的 -

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";

import useCachedResources from "./hooks/useCachedResources";
import useColorScheme from "./hooks/useColorScheme";
import Navigation from "./navigation";

import AppLoading from "expo-app-loading";
import useFonts from "./hooks/useFonts";

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();
  const [IsReady, SetIsReady] = useState(false);

  const FetchFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={FetchFonts}
        onFinish={() => SetIsReady(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

  return (
    <SafeAreaProvider>
      <Navigation colorScheme={colorScheme} />
      <StatusBar />
    </SafeAreaProvider>
  );
}

Answer 2

我在./hooks/useCachedResources.ts下找到了我需要的东西已经有一个部分正在使用 await Font.loadAsync 我只需要将我的字体添加到该部分。

字体正在加载，但我需要使用 Font.loadAsync

Fonts loading, but I need to use Font.loadAsync

fonts

react-native

expo