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

Question

在 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-nativeexpocustom-font

Answer 1

你可以试试这个

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