时间戳

首页 > 解决方案 > 字体加载，但我需要使用 Font.loadAsync

react-native - 字体加载，但我需要使用 Font.loadAsync

问题描述

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

Repo，带有自定义字体的标签模板

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

在此处输入图像描述

标签： react-nativefontsexpo

解决方案

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

在里面创建一个名为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>
  );
}

推荐阅读