Question

在尝试导航其他屏幕之前，我试图预加载所有这些图像。但是我不确定如何实现它。请帮助。

import React from "react";
import { Provider } from "react-redux";
import navigationServices from "./src/helper/navigationServices";
import store from "./src/redux/store";
import RootNavigation from "./src/rootNavigation";


const images = [
  require('./assets/icons/back.png'),
  require('./assets/icons/plants.png'),
  require('./assets/icons/seeds.png'),
  require('./assets/icons/flowers.png'),
  require('./assets/icons/sprayers.png'),
  require('./assets/icons/pots.png'),
  require('./assets/icons/fertilizers.png'),
  require('./assets/images/plants_1.png'),
  require('./assets/images/plants_2.png'),
  require('./assets/images/plants_3.png'),
  require('./assets/images/explore_1.png'),
  require('./assets/images/explore_2.png'),
  require('./assets/images/explore_3.png'),
  require('./assets/images/explore_4.png'),
  require('./assets/images/explore_5.png'),
  require('./assets/images/explore_6.png'),
  require('./assets/images/illustration_1.png'),
  require('./assets/images/illustration_2.png'),
  require('./assets/images/illustration_3.png'),
  require('./assets/images/avatar.png'),
];

const App = () => (
  <Provider store={images}>
    <RootNavigation
      ref={navRef => navigationServices.setTopLevelNavigator(navRef)}
    />
  </Provider>
);

export default App;

我尝试将const映像从redux放到Provider中，但无法加载

Answer 1

最好的选择是将它们预加载到componentDidMount或useEffect挂钩中。

import avatar from 'assets/avatar.png'
import plants from 'assets/plants.png'
import seeds from 'assets/seeds.png'

useEffect(() => {
  imageList = [avatar, plants, seeds]
  imageList.forEach((image) => {
    new Image().src = image
  });
}, [])

Answer 2

要预加载的图像列表：

// Preload images with require();
const images = {
  'icon.png': require('./icon.png'),
  'orbs-1.png': require('./orbs-1.png'),
  'orbs-2.png': require('./orbs-2.png'),
  'orbs-3.png': require('./orbs-3.png'),
  'survey-1.png': require('./survey-1.png'),
};

图像处理器：

// Convert image refs into image objects with Image.resolveAssetSource
loadImages(images) {        
    return Promise.all(Object.keys(images).map((i) => {
        let img = {
            ...Image.resolveAssetSource(images[i]),
            cache: 'force-cache'
        };

        return Image.prefetch(img);
    }));
}

用法：

loadImages(images).then((results) => { /* do something with the image objects */ });

如何预加载本地图像？

2 个答案: