React Native: Bild-Popup (verzögertes Laden) beim ersten Start, obwohl vorab abgerufene lokale Bilder verwendet werden ⇐ IOS

[Guest]

Ich stecke bei einem Fehler in meiner RN Expo-App fest und kann mir nicht vorstellen, was ich falsch mache.
Ich habe versucht, den Fehler zu beheben, der alles verursacht Meine Bilder erscheinen etwa eine halbe Sekunde nach dem Rendern meiner Seiten, wenn der Benutzer sie zum ersten Mal nach dem Booten/Neuladen der App aufruft.
Zuerst dachte ich, das sei der Grund dafür Möglicherweise sind die Bilder, die ich verwende, zu groß, also habe ich es getan Ich habe sie zu Debugging-Zwecken vorübergehend durch kleine Webps ersetzt, die ich bereits in einem anderen Projekt ohne Probleme verwendet habe. Dies war jedoch nicht der Fall.
Dann habe ich versucht, meine Bilder mit dem in den Expo-Dokumenten bereitgestellten Code vorab abzurufen. Das hat überhaupt nichts geändert.
Ich habe auch, nachdem ich einen solchen Vorschlag in einem anderen Thread gesehen hatte, einen Entwicklungs-Build erstellt, um zu sehen, ob er das Problem beheben würde – das war nicht der Fall.
Hier ist der Link zu meinem Repo auf GitHub: https://github.com/irolinski/Well_CBT
Hier ist ein GIF, das zeigt, wie der Fehler aussieht: https://gifyu.com/image/SyL5p
Hier sind die beiden Komponenten, auf die ich mich konzentriert habe: Die zweite ist nur eine zufällige, der ich Bilder hinzugefügt habe.< /p>
_layout.tsx

Code: Select all

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

Code: Select all

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;