reactjs 在使用Expo构建的React Native应用程序中未加载字体

hfyxw5xn  于 2022-12-03  发布在  React
关注(0)|答案(2)|浏览(207)

所有,
我是新的React Native,目前,我有一个问题与自定义字体的使用。我的问题是:字体文件不存在,尽管我已将字体文件放在目录中:./资源/字体error image
我正在按照Expo文档中的步骤使用自定义字体,这是安装expo-font和使用useFont挂钩。我的代码如下:

import { Provider } from 'react-redux'

import { PersistGate } from 'redux-persist/integration/react'
import AuthStack from './routes/authStack'
import store, { persistor } from './store'
import { useFonts } from 'expo-font'
import AppLoading from 'expo-app-loading'
import { Font } from 'expo'
import Loading from './components/loading'

function App() {

  const [fontLoaded] = useFonts({
    Arial: require('./assets/fonts/ARIAL.TTF'),
    ArialBold: require('./assets/fonts/ARIALBD.TTF'),
    BlairMd: require('./assets/fonts/BlairMdITCTTMediumFont.ttf'),
  })
  console.log('app font loaded====', fontLoaded)
  return fontLoaded ? (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <AuthStack />
      </PersistGate>
    </Provider>
  ) : (
    <AppLoading />
  )

一切看起来很好,我,所以我想可能是因为项目设置的原因,所以我试图重新启动项目,卸载所有包,并再次安装它们,清除缓存运行expo r -c。但没有任何工作。
如果有人能帮上忙我很感激谢谢

eqqqjvef

eqqqjvef1#

//USE THIS INSTEAD
import { Provider } from 'react-redux';
import store from './store';
import { useFonts } from 'expo-font';
function App() {

  const [fontLoaded] = useFonts({
    Arial: require('./assets/fonts/ARIAL.TTF'),
    ArialBold: require('./assets/fonts/ARIALBD.TTF'),
    BlairMd: require('./assets/fonts/BlairMdITCTTMediumFont.ttf'),
  });
   
  if(!fontLoaded){
      return null; //AppLoading is deprecated
   };
 
  return(
    <Provider store={store}>
     //Stack Screen to be loaded
    </Provider>
   );
nle07wnf

nle07wnf2#

我也遇到了同样的问题,我可以通过将对象键命名为与文件名相同的名称来解决这个问题
例如:-

const [fontsLoaded] = useFonts({
    PoppinsRegular: require('./../../assets/Fonts/PoppinsRegular.otf'),
    });

相关问题