我无法在React Native上使用apploading。它不能正常工作。

Question

我一直遇到这个错误：错误截图

这是我使用的导入自定义 Google 字体的代码：

import React, { useState } from "react";
import Home from "./screens/home";
import { View } from "react-native";
import * as Font from "expo-font";
import { AppLoading } from "expo";

const getFonts = () =>
  Font.loadAsync({
    "poppins-regular": require("./assets/fonts/Poppins-Regular.ttf"),
    "poppins-bold": require("./assets/fonts/Poppins-Bold.ttf"),
  });

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);
  if (fontsLoaded) {
    return <Home />;
  } else {
    return (
      <AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} />
    );
  }
}

以下是我的Json Package:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~40.0.0",
    "expo-splash-screen": "^0.8.1",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

我似乎找不到错误或修复它。我之前在另一个项目中使用过这种方法并且有效。获取字体信息的方式完全相同。我唯一能想到的可能就是我的软件包目前已经过时了？但我不确定该更新哪个软件包。

有人可以帮忙吗？

- paulob

Answer 1

我可以从您的package.json文件中看出，您正在使用expo SDK 40（截止目前最新版本）

在SDK 40中，AppLoading已经从expo软件包中提取出来了

如果您想要使用此组件，则应该运行"expo install expo-app-loading"并从其自己的软件包导入AppLoading：import AppLoading from 'expo-app-loading';。这是使expo软件包尽可能轻量化的持续努力的一部分。

在expo博客这里查看

步骤：
步骤1：expo install expo-app-loading

步骤2：

将import { AppLoading } from "expo";替换为import AppLoading from 'expo-app-loading';

步骤3：重新启动您的expo开发服务器（expo start）

- Vikrant Bhat

---

谢谢！现在不再出现错误了。但是，当我在Expo上运行它时，我的手机上没有加载任何内容。然而，在我的终端中，它给了我这个错误： AppLoading在加载时抛出了一个意外的错误： 错误：如果提供了startAsync，则需要AppLoading onError属性。 - paulob

你知道我在这里应该做什么吗？是因为新的Expo更新，我现在需要使用异步语法吗？ - paulob

你能向我解释一下正在发生的事情吗？最好附上一些代码 :) - Vikrant Bhat

我搞定了！我必须使用新的应用程序加载语法！我只需要添加onError={console.warn}。感谢您的帮助！我很感激。 - paulob

Answer 2

我的问题是第一次重新加载应用程序（使用expo）时，字体没有加载。

在我的 StyleSheet 中删除、重写和保存 fontFamily 后，文本将被样式化为正确的字体，因为每次保存文件时，应用程序都会自动更新。但我无法使其在第一次加载时生效。

通过在 Font.loadAsync() 函数前放置一个 return 来解决了这个问题：

const fetchFonts = () => {
  return Font.loadAsync({               // <- add return here
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
  });
};

现在AppLoading的startAsync正确地获取了Promise，字体在加载应用后立即加载，没有错误。

const [isDataLoaded, setIsDataLoaded] = useState(false);

  if (!isDataLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setIsDataLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

- Vladimir Cuneaz

Answer 3

在font.loadAsync前面加上return关键字。

- Peter Kampete

Answer 4

提醒一下，从今天开始，在expo-app-loading中使用startAsync方法已被弃用，您可以改用useEffect并按照需要运行您的函数并在其中处理所有错误。

  useEffect(() => {
      const getAsyncData = async () => {
           // Do my async request
           setIsReady(true); 
      }
      getAsyncData ();
   }, [])

假设您的代码中有类似以下内容：const [isReady, setIsReady] = useState(false);

- Shai

Answer 5

以下是我的步骤：
第一步：停止设备
第二步：运行 expo install expo-app-loading
第三步：添加以下代码：import AppLoading from 'expo-app-loading';
第四步：
if (!isDataLoaded) {
return (
<AppLoading
    startAsync={fetchFonts}
    onFinish={() => setIsDataLoaded(true)}
    onError={(err) => console.log(err)}
    />
  );
}

- Kenny Carrasco