自定义字体加载在 Expo React 本机应用程序中不起作用答案

【问题标题】：Custom font load not working in Expo React native app自定义字体加载在 Expo React 本机应用程序中不起作用
【发布时间】：2020-07-06 17:20:56
【问题描述】：

在 react native expo 项目中加载和使用自定义字体时遇到问题（附加屏幕截图）。我尝试了所有方法来修复，但没有得到正确的解决方案。我发现一件令人惊讶的事情是，当创建一个新项目并通过加载在那里使用字体时，它在那里工作但在项目应用程序中不起作用。可能是什么问题？我已经尝试了重新启动服务器、系统、重新安装 expo 应用程序的所有步骤，但都没有奏效。

import React, { useState } from 'react';

import { AppLoading } from 'expo'
import * as Font from 'expo-font'

const fetchFonts = () => {
  return Font.loadAsync({
    'SansPro-regular': require('./assets/fonts/SourceSansPro-Regular.ttf'),
    'SansPro-light': require('./assets/fonts/SourceSansPro-Light.ttf'),
    'SansPro-SemiBold': require('./assets/fonts/SourceSansPro-SemiBold.ttf'),
    'SansPro-Bold': require('./assets/fonts/SourceSansPro-Bold.ttf')
  })
}

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false)

  if (!fontLoaded) {
    return (
      <AppLoading startAsync={fetchFonts} onFinish={() => {
        setFontLoaded(true)
      }}
      />
    )
  }

  return (
    <View>
    <Text style = {{fontFamily: 'SansPro-Bold'}}>Welcome to react native</Text>
    </View>
  );
}

【问题讨论】：

标签： react-native expo custom-font

【解决方案1】：

您需要添加async

const fetchFonts = async () => {
  return Font.loadAsync({
    'SansPro-regular': require('./assets/fonts/SourceSansPro-Regular.ttf'),
    'SansPro-light': require('./assets/fonts/SourceSansPro-Light.ttf'),
    'SansPro-SemiBold': require('./assets/fonts/SourceSansPro-SemiBold.ttf'),
    'SansPro-Bold': require('./assets/fonts/SourceSansPro-Bold.ttf')
  })
}

要使用它，请使用 fontFamily 而不是 fontWeight

【讨论】：

那么你需要通过上面的方法表明该函数是异步的，它在Expo docs中有清楚的演示。
错误地，我写了fontWeight。更新的问题。仍然遇到问题。
您遇到了什么问题？实际上，我使用您的代码复制并创建了一个新的 expo 项目，并且使用我的自定义字体可以正常工作。
是的，我也提到了这个问题，当我通过创建新项目来使用它时，令人惊讶的是相同的代码正在工作。但它不适用于我之前创建的项目。我必须在那里使用自定义字体。上面的截图问题。可能有什么问题。是关于一些内部节点模块吗？如果是，那我该如何解决？

【解决方案2】：

你可以试试这个

expo install 'expo-font'
expo install expo-app-loading

替换它

import { AppLoading } from 'expo'
import * as Font from 'expo-font'

与

import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';

【讨论】：