我无法在我的 React Native 上使用 apploading.它不会正常工作 [英] I can't use the apploading on my react native. It wont work properly

问题描述

我不断收到此错误:错误屏幕截图

这是我用来导入我的自定义谷歌字体的代码:

import React, { useState } from "react";从./screens/home"导入主页；import { View } from react-native";import * as Font from "expo-font";import { AppLoading } from "expo";const getFonts = () =>Font.loadAsync({poppins-regular":要求(./assets/fonts/Poppins-Regular.ttf")，poppins-bold":要求(./assets/fonts/Poppins-Bold.ttf")，});导出默认函数 App() {const [fontsLoaded, setFontsLoaded] = useState(false);如果(字体加载){返回<首页/>;} 别的 {返回 (<AppLoading startAsync={getFonts} onFinish={() =>setFontsLoaded(true)}/>);}}

这是我的 Json 包:

<代码>{main":node_modules/expo/AppEntry.js"，脚本":{开始":博览会开始"，android":expo start --android"，ios":expo start --ios"，"web": "expo start --web",弹出":博览会弹出"},依赖关系":{博览会":~40.0.0"，expo-splash-screen":^0.8.1"，博览会状态栏":~1.0.3"，反应":16.13.1"，反应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"},开发依赖":{@babel/core":~7.9.0"；},私人":真的}

我似乎无法找到错误或修复它.我之前用另一个项目做过这个，它奏效了.获取字体信息是完全一样的.我唯一能想到的是我的包裹可能是过时的自动取款机?但我不确定要更新哪个包.

有人可以帮忙吗?

解决方案

我可以从你的 package.json 中看到你在 expo SDK 40(截至目前的最新版本)

AppLoading 已从 SDK 40 中的 expo 包中提取

如果你想使用这个组件，你应该运行 expo install expo-app-loading 并从它自己的包中导入 AppLoading:import AppLoading from 'expo-app-loading';.这是使 expo 包尽可能轻量级的持续努力的一部分.

在此处查看世博会博客.>

步骤:
第一步: expo install expo-app-loading

第 2 步:

replace import { AppLoading } from "expo";

by import AppLoading from 'expo-app-loading';

第 3 步:重新启动您的博览会开发服务器(博览会开始)

I keep getting this error: error screenshot

Here is the code that im using to import my custom google fonts:

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)} />
    );
  }
}

Here is my 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
}

I can't seem to find the error or fix it. I did this with another project before and it worked. The getting the font info is exactly the same. The only thing i can think of is maybe my packages are outdated atm? but Im not sure which package to even update.

Can someone please help?

解决方案

I can see from your package.json that you are at expo SDK 40 (latest release as of now)

AppLoading has been extracted from the expo package in SDK 40

If you want to use this component, you should run expo install expo-app-loading and import AppLoading from its own package: import AppLoading from 'expo-app-loading';. This is part of an ongoing effort to make the expo package as lightweight as possible.

Check the expo blog here.

Steps:
STEP 1: expo install expo-app-loading

STEP 2:

replace import { AppLoading } from "expo";

by import AppLoading from 'expo-app-loading';

STEP 3: Restart your expo dev server (expo start)

这篇关于我无法在我的 React Native 上使用 apploading.它不会正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！