未定义不是函数字体。默认错误博览会答案

【问题标题】：Undefined is not a function font.default error expo未定义不是函数字体。默认错误博览会
【发布时间】：2020-11-13 06:30:08
【问题描述】：

所以我一直在尝试将自定义字体加载到 abd expo 托管项目中，但每次我收到此函数错误...使用 async...useFonts 你命名它。这是我的 App.js 的源代码。

import React, { useState } from "react";
import AppNavigator from "./src/navigator/AppNavigator";
import useFonts from "@use-expo/font";
import AppLoading from "expo";

const App = () => {
  const [isLoaded] = useFonts({
    "proxima-nova": require("./src/assets/fonts/proxima-nova.ttf"),
    "proxima-nova-bold": require("./src/assets/fonts/proxima-nova-bold.ttf"),
  });

  if (!isLoaded) {
    return <AppLoading />;
  } else {
    return <AppNavigator />;
  }
};

export default App;

enter image description here

【问题讨论】：

经历同样的事情，假设它可能发生了重大变化，如果我发现任何东西我会在这里发布

标签： javascript react-native fonts async-await expo

【解决方案1】：

在玩了一阵子之后，我终于弄清楚了哪里出了问题。因此，只要您使用的是功能组件，您就可以按照这些思路进行尝试。

之后（工作）

import React, { useState, useEffect} from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import * as firebase from 'firebase';
import * as Font from 'expo-font';

export default function LoadingScreen({ navigation }) {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    Font.loadAsync({
      'montserrat-bold': require('../assets/fonts/Montserrat-Bold.ttf'),
      'montserrat-light': require('../assets/fonts/Montserrat-Light.ttf'),
      'montserrat-regular': require('../assets/fonts/Montserrat-Regular.ttf'),
      'montserrat-thin': require('../assets/fonts/Montserrat-Thin.ttf'),
    }).then(() => setFontsLoaded(true));
  }, []);

  if (fontsLoaded) {
    firebase.auth().onAuthStateChanged(user => {
      navigation.navigate(user ? 'App' : 'Auth')
    })
  }

  return (
    <View style={styles.container}>
      <Text>Loading...</Text>
      <ActivityIndicator size="large"></ActivityIndicator>
    </View>
  );
}

之前（不工作）

import React, { useState, useFont} from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import * as firebase from 'firebase';
import * as Font from 'expo-font';

export default function LoadingScreen() {
  let [fontsLoaded] = Font.useFonts({
    'montserrat-bold': require('../assets/fonts/Montserrat-Bold.ttf'),
    'montserrat-light': require('../assets/fonts/Montserrat-Light.ttf'),
    'montserrat-regular': require('../assets/fonts/Montserrat-Regular.ttf'),
    'montserrat-thin': require('../assets/fonts/Montserrat-Thin.ttf'),
  });

  if (!fontsLoaded) {
    return (
      <View style={styles.container}>
        <Text>Loading...</Text>
        <ActivityIndicator size="large"></ActivityIndicator>
      </View>
    );
  }

  if (fontsLoaded) {
    firebase.auth().onAuthStateChanged(user => {
      this.props.navigation.navigate(user ? 'App' : 'Auth')
    })
  }
}

基本上在等待状态更新的路线上有一个加载器或类似 ActivityIndicator 的东西，并且在 Font.loadFonts 加载后它会点击 if 语句，您可能只返回应用程序导航器。我不是的原因是我使用 firebase 的身份验证流程。

【讨论】：