Как предварительно загрузить ресурсы на React Native Expo

Question

Кто-нибудь знает, как предварительно загрузить ресурсы (в основном png), хранящиеся локально в AppLoading? Я уже предварительно загрузил шрифты и вставил фрагмент кода кеширования ресурсов, что еще?

Answer 1

Вот как я предварительно загружаю свои активы, и вы можете ссылаться на do c

import React, { useState } from "react";
import { AppRegistry } from "react-native";
import { AppLoading } from "expo";
import * as Font from "expo-font";
import { Asset } from "expo-asset";

function App() {
 const [assetsLoaded, setAssetsLoaded] = useState(false);

 const _loadAssetsAsync = async () => {
   const imageAssets = cacheImages([
     require("./assets/images/car.png"),
     require("./assets/images/game.png"),
     require("./assets/images/home.png"),
     require("./assets/images/wardrobe.png"),
   ]);

   const fontAssets = cacheFonts([
     { "poppins-regular": require("./assets/fonts/regular.ttf") },
     { "poppins-bold": require("./assets/fonts/bold.ttf") },
     { "poppins-thin": require("./assets/fonts/thin.ttf") },
   ]);

   await Promise.all([...imageAssets, ...fontAssets]);
 };

 if (!assetsLoaded) {
   return (
     <AppLoading
       startAsync={_loadAssetsAsync}
       onFinish={() => setAssetsLoaded(true)}
       onError={console.warn}
     />
   );
 }

 return (
   <YourApp/>
 );
}

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

function cacheFonts(fonts) {
 return fonts.map((font) => Font.loadAsync(font));
}

AppRegistry.registerComponent("App", () => App);

export default App;