React Native Expo - 自定义字体未加载 Font.loadAsync
React Native Expo - Custom Fonts Not Loading With Font.loadAsync
我了解最新的 Expo 版本,但出于某种原因,我无法使用简单的自定义字体。这是我设置的一个新项目,试图安装自定义字体。
import React, { useState } from 'react';
import { Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';
const fetchFonts = () =>
Font.loadAsync({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
export default (props) => {
const [dataLoaded, setDataLoaded] = useState(false);
if (!dataLoaded) {
return (
<AppLoading
startAsync={fetchFonts}
onFinish={() => setDataLoaded(true)}
onError={(err) => console.log(err)}
/>
);
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>
Inter Black
</Text>
<Text style={{ fontSize: 40 }}>Platform Default</Text>
</View>
);
};
这是我在控制台中得到的:
fontFamily "Inter-Black" 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.
at node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in dispatchAction
at App.js:19:37 in AppLoading.props.onFinish
at node_modules/expo-app-loading/build/AppLoading.js:41:12 in startLoadingAppResourcesAsync
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
您必须等待加载功能
const fetchFonts = async () =>
await Font.loadAsync({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
此外,尝试创建一个自定义挂钩来加载字体,而不是这样做。检查 答案。
你可以这样做
在您的 App.js
所在的位置创建一个名为 hooks
的文件夹。然后在 hooks
文件夹中创建一个名为 useFonts.js
的文件
里面useFonts.js
这样写
import * as Font from "expo-font";
export default useFonts = async () =>
await Font.loadAsync({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
现在在你的App.js
中这样写
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';
import useFonts from './hooks/useFonts';
export default function App() {
const [IsReady, SetIsReady] = useState(false);
const LoadFonts = async () => {
await useFonts();
};
if (!IsReady) {
return (
<AppLoading
startAsync={LoadFonts}
onFinish={() => SetIsReady(true)}
onError={() => {}}
/>
);
}
return <View styles={styles.container}>{/* Code Here */}</View>;
}
我了解最新的 Expo 版本,但出于某种原因,我无法使用简单的自定义字体。这是我设置的一个新项目,试图安装自定义字体。
import React, { useState } from 'react';
import { Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';
const fetchFonts = () =>
Font.loadAsync({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
export default (props) => {
const [dataLoaded, setDataLoaded] = useState(false);
if (!dataLoaded) {
return (
<AppLoading
startAsync={fetchFonts}
onFinish={() => setDataLoaded(true)}
onError={(err) => console.log(err)}
/>
);
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>
Inter Black
</Text>
<Text style={{ fontSize: 40 }}>Platform Default</Text>
</View>
);
};
这是我在控制台中得到的:
fontFamily "Inter-Black" 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.
at node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in dispatchAction
at App.js:19:37 in AppLoading.props.onFinish
at node_modules/expo-app-loading/build/AppLoading.js:41:12 in startLoadingAppResourcesAsync
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
您必须等待加载功能
const fetchFonts = async () =>
await Font.loadAsync({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
此外,尝试创建一个自定义挂钩来加载字体,而不是这样做。检查
你可以这样做
在您的 App.js
所在的位置创建一个名为 hooks
的文件夹。然后在 hooks
文件夹中创建一个名为 useFonts.js
里面useFonts.js
这样写
import * as Font from "expo-font";
export default useFonts = async () =>
await Font.loadAsync({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
现在在你的App.js
中这样写
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';
import useFonts from './hooks/useFonts';
export default function App() {
const [IsReady, SetIsReady] = useState(false);
const LoadFonts = async () => {
await useFonts();
};
if (!IsReady) {
return (
<AppLoading
startAsync={LoadFonts}
onFinish={() => SetIsReady(true)}
onError={() => {}}
/>
);
}
return <View styles={styles.container}>{/* Code Here */}</View>;
}