0

我已经创建了一个react-native/typescript应用程序expo CLI，这会生成一些基本代码，包括hooks/useCachedResources在渲染应用程序之前加载我们需要的任何资源或数据，在我的情况下，在这个钩子中我加载自定义字体（特别是Inter Display Font）。我正在尝试一些问题，因为该应用程序仅加载两个权重：regular and medium，如果我尝试使用semi-bold或bold这不起作用并使用默认提供的 san serif 字体。

附加数据：

  1. 字体路径没问题
  2. Expo 应用程序没有显示任何错误。我在其他问题中看到过错误，例如fontFamily "MyFontFamily" is not a system font and has not been loaded through Font.loadAsync.This is not the case。
  3. 字体系列名称的格式正确。
  4. 我正在使用React Native UI Kitten，并按照它们的建议加载字体Advanced Configuration并更改一些特定的样式。
  5. 根据一些答案，Android 上对自定义字体的开箱即用支持在 React Native 中受到了一些限制。它不支持正常和粗体以外的字体粗细。所以我尝试设置fontWeight: normal或任何权重，但没有任何效果。

useCachedResources 挂钩

这默认带有expo init my-app.

import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';

// Error reporting service
import { logger } from '@utils';

export function useCachedResources(): boolean {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  // Load any resources or data that we need prior to rendering the app
  useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        await SplashScreen.preventAutoHideAsync();

        // Load fonts
        await Font.loadAsync({
          'inter-display-regular': require('../assets/fonts/InterDisplay-Regular.ttf'),
          'inter-display-medium': require('../assets/fonts/InterDisplay-Medium.ttf'),
          'inter-display-semibold': require('../assets/fonts/InterDisplay-SemiBold.ttf'),
          'inter-display-bold': require('../assets/fonts/InterDisplay-Bold.ttf'),
        });
      } catch (loadCachedResourcesError) {
        logger.log(loadCachedResourcesError);
      } finally {
        setLoadingComplete(true);
        await SplashScreen.hideAsync();
      }
    }

    loadResourcesAndDataAsync();
  }, []);

  return isLoadingComplete;
}

使用 App.tsx 中的钩子

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import Navigation from './navigation';

// again this comes by defautl expo init command
export default function App(): React.ReactElement | null  {
  const isLoadingComplete = useCachedResources();

  if (!isLoadingComplete) {
    return null;
  } 

  return (
    <SafeAreaProvider>
      <Navigation />
      <StatusBar />
    </SafeAreaProvider>
  );
}

mapping.json：用于更改字体样式的特定 UI-Kitten 配置

我可以认为问题出在此处，但问题是，如果加载字体时出现问题，要么 expo 已经抛出错误，要么其他字体权重（常规/中等）不会加载。

{
  "strict": {
    "text-font-family": "inter-display-regular",

    "text-heading-1-font-size": 32,
    "text-heading-1-font-weight": "normal",
    "text-heading-1-font-family": "inter-display-medium",

    "text-paragraph-1-font-size": 16,
    "text-paragraph-1-font-weight": "normal",
    "text-paragraph-1-font-family": "$text-font-family",
  }
}

问题

我不知道问题是否来自expo，ui kitten或者是否inter由于其他原因无法通过 react native 加载字体。

4

1 回答 1

0

在您的 useCachedResources 尝试从 SplashScreen 方法中删除“等待”关键字：

SplashScreen.preventAutoHideAsync(); SplashScreen.hideAsync();

于 2021-06-14T12:59:32.040 回答