自定义字体加载在Expo React本机应用程序中不起作用 [英] Custom font load not working in Expo React native app

问题描述

我在加载&在React Native Expo项目中使用自定义字体.我尝试了所有方法进行修复，但没有找到合适的解决方案.一件令我惊讶的事情是，当创建一个新项目并在其中加载使用字体时，它可以在其中工作，但不能在项目应用程序中工作.可能是什么问题?我已经尝试了重新启动服务器，系统，重新安装expo应用程序的所有步骤，但是没有一个起作用.

I am getting issue(attached screenshot) while loading & using custom font in react native expo project. I tried all ways to fix but didn't get a proper solution. One surprising thing I found it that when created a new project and used font there by loading, It's working there but not working in project app. What may be issue? I have tried all steps of Restarting server, System, Reinstalling expo app but none of them worked.

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

推荐答案

您可以尝试使用此

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';

这篇关于自定义字体加载在Expo React本机应用程序中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！