Я продолжаю получать эту ошибку: скриншот ошибки
Вот код, который я использую для импорта моих пользовательских шрифтов 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:
{
"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
}
Я не могу найти ошибку или исправить ее. Я сделал это с другим проектом раньше, и это сработало. Получение информации о шрифте точно такое же. Единственное, о чем я могу думать, может быть, мои пакеты устарели? но я не уверен, какой пакет даже обновить.
Может кто-нибудь помочь?
🤔 А знаете ли вы, что...
JavaScript поддерживает работу с куки и хранилищем веб-браузера для сохранения данных на клиентской стороне.
Из вашего package.json я вижу, что вы находитесь на выставке SDK 40 (последний выпуск на данный момент)
AppLoading был извлечен из пакета expo в SDK 40.
Если вы хотите использовать этот компонент, вы должны запустить expo install expo-app-loading и импортировать AppLoading из его собственного пакета: import AppLoading from 'expo-app-loading';. Это часть постоянных усилий, направленных на то, чтобы сделать выставочный пакет как можно более легким.
Проверьте выставочный блог здесь.
Шаги:
ШАГ 1: expo install expo-app-loading
ШАГ 2:
заменить import { AppLoading } from "expo";
от import AppLoading from 'expo-app-loading';
ШАГ 3: Перезапустите сервер разработки expo (запуск выставки)
Напоминаю, что на сегодняшний день использование метода startAsync устарело в expo-app-loading, вместо этого вы можете использовать useEffect и запускать свою функцию, как хотите, и обрабатывать там все ошибки,
useEffect(() => {
const getAsyncData = async () => {
// Do my async request
setIsReady(true);
}
getAsyncData ();
}, [])
Предполагая, что в вашем коде есть что-то вроде const [isReady, setIsReady] = useState(false);
Моя проблема заключалась в том, что при первой перезагрузке приложения (с выставкой) шрифты не загружались.
После удаления, перезаписи и сохранения fontFamily внутри моей таблицы стилей текст был оформлен с использованием правильного шрифта, так как приложение автоматически обновляется каждый раз, когда вы сохраняете файл. Я просто не мог заставить его работать при первой загрузке.
Я решил проблему, поместив return перед функцией Font.loadAsync():
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"),
});
};Теперь startAsync AppLoading правильно получает промис, и шрифты загружаются сразу после загрузки приложения, без ошибок.
const [isDataLoaded, setIsDataLoaded] = useState(false);
if (!isDataLoaded) {
return (
<AppLoading
startAsync = {fetchFonts}
onFinish = {() => setIsDataLoaded(true)}
onError = {(err) => console.info(err)}
/>
);
}для меня результат следующих шагов:
ШАГ 1: остановите устройство
ШАГ 2: экспо установка экспо загрузка приложения
ШАГ 3: добавьте следующую строку: import AppLoading from 'expo-app-loading';
ШАГ 4:
если (! isDataLoaded) {
вернуться (
<Загрузка приложения
startAsync = {fetchFonts}
onFinish = {() => setIsDataLoaded(true)}
onError = {(ошибка) => console.info(ошибка)}
/>
);
}