问题描述
我试图在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',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
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）