React Native: всплывающее окно изображения (отложенная загрузка) при первом запуске, несмотря на использование предварит ⇐ IOS

[Anonymous]

У меня возникла ошибка в приложении RN Expo, и я не могу понять, что делаю не так.
Я пытаюсь исправить ошибку, из-за которой все мои изображения всплывают примерно через полсекунды после рендеринга моих страниц, когда пользователь впервые заходит на них после загрузки/перезагрузки приложения.
Сначала я подумал, что причина в этом возможно, изображения, которые я использую, слишком велики, поэтому Я временно, в целях отладки, заменил их небольшими веб-сайтами, которые уже без проблем использовал в другом проекте. Оказалось, что это не так.
Затем я попробовал предварительно загрузить изображения, используя код, представленный в документации Expo. Это вообще ничего не изменило.
Я также, увидев такое предложение в другой теме, сделал сборку для разработки, чтобы посмотреть, исправит ли она это - но не помогло.
Вот ссылка на мой репозиторий на GitHub: https://github.com/irolinski/Well_CBT
Вот GIF-изображение того, как выглядит ошибка: https://gifyu.com/image/SyL5p
Вот два компонента, на которых я сосредоточился: второй — случайный, к которому я добавил изображения.< /p>
_layout.tsx
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect, useState } from "react";
import { useColorScheme } from "@/hooks/useColorScheme";
import { Provider as StateProvider } from "react-redux";
import { store } from "@/state/store";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Asset } from "expo-asset";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

function cacheImages(images: any[]) {
return images.map((image) => {
if (typeof image === "string") {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
}

export default function RootLayout() {
const [fontsLoaded] = useFonts({
Inter: require("../assets/fonts/Inter-Standard.ttf"),
InterItalic: require("../assets/fonts/Inter-Italic.ttf"),
KodchasanRegular: require("../assets/fonts/Kodchasan-Regular.ttf"),
KodchasanMedium: require("../assets/fonts/Kodchasan-Medium.ttf"),
});

const [imagesLoaded, setImagesLoaded] = useState(false);

// Load any resources or data that you need before rendering the app
useEffect(() => {
async function loadResourcesAndDataAsync() {
try {
SplashScreen.preventAutoHideAsync();

const imageAssets = cacheImages([
require("../assets/images/affirmation-images/California-backyard-1.webp"),
require("../assets/images/affirmation-images/California-backyard-2.webp"),
require("../assets/images/affirmation-images/California-backyard-3.webp"),
require("../assets/images/affirmation-images/California-backyard-4.webp"),
require("../assets/images/affirmation-images/english-countryside-1.webp"),
require("../assets/images/affirmation-images/english-countryside-2.webp"),
require("../assets/images/affirmation-images/english-countryside-3.webp"),
require("../assets/images/affirmation-images/english-countryside-4.webp"),
]);

await Promise.all([...imageAssets]);
console.log("images cached");
} catch (err) {
console.warn(err);
} finally {
setImagesLoaded(true);
SplashScreen.hideAsync();
}
}

loadResourcesAndDataAsync();
}, []);

if (!imagesLoaded || !fontsLoaded) {
return null;
}

return (












);
}

app/(tabs)/Tools.tsx
import React from "react";
import { View } from "react-native";
import FrameMenu from "@/components/FrameMenu";
import Text from "@/components/global/Text";
import ToolCard from "../../components/ToolCard";

const Tools = () => {
return (


Classic



Relax


Distract yourself




);
};

export default Tools;


Подробнее здесь: https://stackoverflow.com/questions/791 ... prefetched