Блог

Итак, что мне нужно сделать, это загрузить изображения из локальной папки во время загрузки приложения. Итак, я попытался реализовать это таким образом:

         async function _cacheResourcesAsync() {
            return new Promise(async (resolve) => {
                resolve();
                const images = [
                    require("whatever"),
                    require("whatever"),
                    require("whatever"),
                    require("whatever"),
                ]
        
                const cacheImages = images.map(image => {
                    return Asset.fromModule(image).downloadAsync();
                })
            });
        }
    
    const App = () => {     
        const [isLoaded, setIsLoaded] = useState(false);
        
        if (!isLoaded) {
            return (
<AppLoading 
                startAsync={_cacheResourcesAsync}
                onFinish={() => setIsLoaded(true)}
                onError={console.warn}
            />
)
        } else {
            return Whatever
        }
    }
  

Но это не работает, и я не совсем понимаю, как я могу использовать эти изображения позже в своем коде, потому что массив с ними объявляется только в функции _cacheResourcesAsync . Что я делаю не так?

Expo: вот рабочий официальный пример

 import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset } from 'expo-asset';
import { AppLoading } from 'expo';

export default class App extends React.Component {
  state = {
    isReady: false,
  };

  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={this._cacheResourcesAsync}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.warn}
        />
      ); }

    return (
      <View style={{ flex: 1 }}>
        <Image source={require('./assets/snack-icon.png')} />
      </View>
    );
  }

  async _cacheResourcesAsync() {
    const images = [require('./assets/snack-icon.png')];

    const cacheImages = images.map(image => {
      return Asset.fromModule(image).downloadAsync();
    }); 
    return Promise.all(cacheImages);
  }
}
  

Для React Native я бы предложил использовать надежные решения, такие как