如何在React Native中使用自定义字体与Nativewind？

Question

我是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: [],
};

我应该删除或添加哪些内容才能加载这个字体？

- Ruslan Makhmatov

Answer 1

使用/创建theme.js文件，将常量保存在其中，以便您可以在整个应用程序中使用：

export const FONTFAMILY = {
    musketeer: {fontFamily: 'Musketeer'},
}

然后在您的主要App.js文件中：

import { useFonts } from 'expo-font';
import { FONTFAMILY } from './theme.js';

export default function App() {

  const [fontsLoaded] = useFonts({
    'Musketeer': require("../assets/fonts/Pixel-Musketeer.otf"),
  });

  if(!fontsLoaded) return null;

  return (
    <Text style={{...FONTFAMILY.musketeer}}>used fonts here</Text
  );
}

- John Ocean

Answer 2

在tailwind.config.js文件中定义您的字体名称和文件，就像这样

module.exports = { fontFamily: {fontName: "fontFileName"} }

将此字体文件（.otf或.ttf）放入您的./assets/fonts/文件夹中。

安装“expo-font”包并将其导入到您的App.js文件中。

现在在返回之前在您的App组件中加载字体，像这样：

import { useFonts } from "expo-font";

export default function App() {
...
// Loading font
fonts const [loaded] = useFonts({
    fontFileName: require("./assets/fonts/fontFileName.otf")
});

if (!loaded) {
return null;
}
// Your App component JSX
return (
    ...
)
}

然后在你的课堂上使用：

className="font-fontName"

如果您遇到命名问题，请参考此thread。

- Leon

Answer 3

如果还没有创建，请在项目根目录下创建一个名为react-native.config.js的配置文件。然后在module.exports中添加以下代码：

- Anshit Raj Yadav

---

什么代码？ - Ruslan Makhmatov