为什么我的自定义字体没有加载到 React Native 上？答案

【问题标题】：Why isn't my custom fonts loaded onto React Native?为什么我的自定义字体没有加载到 React Native 上？
【发布时间】：2021-06-27 09:35:06
【问题描述】：

我正在尝试为我的项目使用自定义字体。我已将“Roboto”的所有变体保存到我的资产文件夹中。

我的 react-native 配置

module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets: ["./assets/fonts/"]
};

导出自定义字体的我的主题页面

import { Dimensions } from "react-native";
const { width, height } = Dimensions.get("window");

export const FONTS = {
largeTitle: { fontFamily: "Roboto-regular", fontSize: SIZES.largeTitle, lineHeight: 55 },
h1: { fontFamily: "Roboto-Black", fontSize: SIZES.h1, lineHeight: 36 },
h2: { fontFamily: "Roboto-Bold", fontSize: SIZES.h2, lineHeight: 30 },
}

const appTheme = { COLORS, SIZES, FONTS };

export default appTheme;

在我的主页上，我正在尝试使用该字体。

import React from "react"
import { SafeAreaView, StyleSheet, View, Text, TouchableOpacity, Image, FlatList } from "react- 
native"
import { COLORS, SIZES, icons, images, FONTS } from '../constants'

function renderMainCategories(){
    return (

    <View style={{ padding:SIZES.padding * 2 }}>
        <Text style={{ ...FONTS.h1 }}>Main</Text>
        <Text style={{ ...FONTS.h1 }}>Categories</Text>
    </View>

)}

正如您在 style={{ ...FONTS.h1 }} 中看到的那样，我觉得我做的一切都是正确的，但由于某种原因，它在尝试使用字体时给了我一个错误。

它给了我这个错误---

fontFamily "Roboto-Black" 不是系统字体，尚未通过 Font.loadAsync 加载。

我尝试找到 Font.loadAsync 并尝试将其添加到父组件，但它不起作用！我已经尝试过 npx react-native 链接！我真的很感谢有人提供建议，而不仅仅是页面链接，谢谢！

有什么建议吗？

【问题讨论】：

标签： javascript reactjs react-native fonts

【解决方案1】：

如果您使用 Expo，您可以尝试使用 useFonts : https://docs.expo.dev/guides/using-custom-fonts/

它对我有用。

【讨论】：

【解决方案2】：

请正确点击此链接，您应该可以解决问题： https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4

【讨论】：

这是我尝试的第一个链接，但没有成功。