React Native 字体不适用于 Styleshhet.create 对象

Question

fontFamily 不工作。为什么我必须使用 expo 字体？ 另外，使用expo时，需要在元素中指定字体名称，我不希望这样。

//react-native.config.js

module.exports = {
  "assets": ["./assets/fonts/"],
}

// src/constants/fonts.ts

 export const fonts = {
  QUICKSAND: {
    REGULAR: 'QuicksandRegular',
    BOLD: 'QuicksandBold',
    LIGHT: 'QuicksandLight',
    MEDIUM: 'QuicksandMedium',
  },
  SOUR_GUMMY: {
    REGULAR: 'SourGummyRegular',
    BOLD: 'SourGummyBold',
    LIGHT: 'SourGummyLight',
    MEDIUM: 'SourGummyMedium',
  },
}

// GreetingPage.ts

import { StyleSheet, Text, View } from "react-native";
import React from "react";
import colors from "../constants/colors";
import { flexbox } from "../constants/mixins";
import { fonts } from "../constants/fonts";

const GreetingPage = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to App</Text>
    </View>
  );
};



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.primary,
    width: "100%",
    ...flexbox("center", "center"),
  },
  text: {
    fontSize: 24,
    color: colors.white,
    fontFamily: fonts.SOUR_GUMMY.BOLD,
  },
});

export default GreetingPage;

//资源/字体 在此输入图片描述

Answer 1

这是一个在我的 React 本机应用程序中对我有用的解决方案

1. 在 src 文件夹中声明一个 font.ts 文件并将其放入其中

   导出 const FONT_FAMILY = { nunito_black: require("../assets/fonts/Nunito/static/Nunito-Black.ttf"),} 您可以将其更改为您想要在应用程序中使用的字体

2. 转到您的 app.tsx 文件并导入上面声明的 FONT_FAMILY。然后，将此代码放入您的 app.tsx 中。

   const [已加载] = useFonts(FONT_FAMILY); 如果（！加载）{ 返回空值； }

注意：从 expo-fonts 导入 useFonts 进一步阅读：expo-fonts