ローカルから画像をプリロードしてエキスポとネイティブで反応させる方法

Question

私はプロジェクトをやっていますが、背景画像を読み込むときに私は立ち往生しています。

<Image 
    source={Images.welcomeBg} 
    style={styles.container} 
    > 
... 
</Image> 

が、画像は、私はこのlink は、それはまだ今は動作しません従ってやってる それをロードする1-2秒を費やしています。 Plzを私はあなたがこの

が、その後App.jsまたは何あなたの中に

import { Asset, Font } from 'expo'; 

export default function cacheAssetsAsync({ 
    images = [], 
    fonts = [], 
    videos = [], 
}) { 
    return Promise.all([ 
    ...cacheImages(images), 
    ...cacheFonts(fonts), 
    ...cacheVideos(videos), 
    ]); 
} 

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

function cacheVideos(videos) { 
    return videos.map(video => Asset.fromModule(video).downloadAsync()); 
} 

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

を新しいと呼ばれるcachedAssetAsync.js（あなたが好きな名前を選択することができることを確認）を作る行うことができます

Answer 1

このバグを修正するのに役立ちますあなたが使用するルートコンポーネントは、このようにすることができます

async _loadAssetsAsync() { 
    try { 
     await cacheAssetsAsync({ 
     images: [require('./assets/images/exponent-icon.png')], 
     fonts: [ 
      { 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf') }, 
      MaterialIcons.font, 
     ], 
     videos: [require('./assets/videos/ace.mp4')], 
     }); 
    } catch (e) { 
     console.log({ e }); 
    } finally { 
     this.setState({ appIsReady: true }); 
    } 
    } 

appIsReadyがfalseの場合は、appIsReadyがtrueの実際の画面を表示しています。そして、あなたはこれを1つのファイルでのみ行うことができます。

博覧会：https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html