在React Native中使用矢量图标中的预加载图标

Question

我试图在Expo应用程序的矢量图标中使用Entypo的“竖起大拇指”图标。我收到关于它是自定义字体的错误，需要使用Font.loadAsync。我通过了Expo - Preoloading and Caching Assets和其他一些关于stackoverflow的文章，并相应地将代码更改为以下内容-

import React, { useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import AppText from '../components/AppText';
import Screen from '../components/Screen';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import { Entypo } from '@expo/vector-icons';

async function _loadAssetsAsync() {
    await Promise.all([Font.loadAsync(Entypo.font)]);
}

function SecurityScanReport(props) {
  const [isReady, setIsReady] = useState(false);
  
  if(!isReady){
    return (
      <AppLoading
        startAsync={_loadAssetsAsync}
        onFinish={() => setIsReady(true)}
        onError={console.warn}
      />
    );
  }
  else{
    let report = (
      <View style={styles.reportContainer}>
        <Entypo name='thumbs-up' size={120} color='green'/>
        <Text style={[{color: 'green'}, {fontSize: 20}]}>Safe to Enter</Text>
      </View>
    );
    if(props.permitAccess === false){
      report = (
        <View style={styles.reportContainer}>
          <Entypo name='thumbs-down' size={120} color='red'/>
          <Text style={[{color: 'red'}, {fontSize: 20}]}>Access Denied</Text>
        </View>
      );
    }

    return (
      <Screen style={styles.container}>
        <View style={styles.reportContainer}>
          {report}
        </View>
      </Screen>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  reportContainer: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8,
  }

});

export default SecurityScanReport;

但是，我仍然遇到以下相同的错误。如何使用预先加载的资产或资产未正确加载？

fontFamily "entypo" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.
* [native code]:null in __expoConsoleLog
- node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
- node_modules/expo/build/environment/muteWarnings.fx.js:27:4 in error
- node_modules/expo/node_modules/expo-font/build/Font.js:29:16 in processFontFamily
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:3872:14 in diffProperties
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:3744:37 in addNestedProperty
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:3883:40 in diffProperties
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:4268:28 in createInstance
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16949:39 in completeWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20912:27 in completeUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20882:29 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20848:38 in workLoopSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20456:22 in performSyncWorkOnRoot
* [native code]:null in performSyncWorkOnRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5703:31 in runWithPriority$argument_1
- node_modules/react-native/node_modules/scheduler/cjs/scheduler.development.js:818:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5698:21 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5686:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19845:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11880:16 in dispatchAction
* [native code]:null in dispatchAction
* app/screens/SecurityScanReport.js:20:18 in AppLoading.props.onFinish
- node_modules/expo/build/launch/AppLoading.js:30:31 in _startLoadingAppResourcesAsync
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:293:29 in invoke
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:154:27 in invoke
- node_modules/regenerator-runtime/runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
- node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:135:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:183:16 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:446:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:396:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:144:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue