我是React-Native的新手,我在添加字体时遇到了问题。我正在尝试从.otf文件中加载自定义字体,但是出现了错误:
fontFamily "Pixel-Musketeer" 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.
我尝试使用Font.loadAsync,但无论如何都会出现以下错误。
目前我的代码:
Home.js
import {
View,
Text
} from "react-native";
import React from "react";
// State
import {
useState
} from "react";
// Fonts
import AppLoading from "expo-app-loading";
import useFonts from "../hooks/useFonts";
const Home = () => {
const [IsReady, SetIsReady] = useState(false);
const LoadFonts = async() => {
await useFonts();
};
if (!IsReady)
return ( <
AppLoading startAsync = {
LoadFonts
}
onFinish = {
() => SetIsReady(true)
}
onError = {
() => {}
} >
< /AppLoading>
);
return ( <
View className = "bg-mainRed flex-1 justify-center items-center" >
<
Text className = "font-Musketeer text-5xl" > King 's Dungeon</Text> <
/View>
);
};
export default Home;
useFonts.js
import * as Font from "expo-font";
export default useFonts = async () =>
await Font.loadAsync({
Musketeer: require("../assets/fonts/Pixel-Musketeer.otf"),
});
Tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./App.{js,jsx,ts,tsx}",
"./screens/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
],
theme: {
colors: {
mainRed: "#3B111D",
grey: "#564950",
darkGreen: "#86978F",
green: "#BEDDA4",
brightGreen: "#E4FABD",
},
extend: {
fontFamily: {
Musketeer: ["Pixel-Musketeer"],
},
},
},
plugins: [],
};