Expo大作戰(十一)--expo中的預載入和緩存資產(Preloading & Caching Assets),expo中的圖標 (Icon)

簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網

我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732981

【之前我寫過一些列關於expo和rn入門配置的東i西，大家可以點擊這裡查看：從零學習rn開發】

相關文章：

Expo大作戰(一)--什麼是expo，如何安裝expo clinet和xde，xde如何使用

Expo大作戰(二)--expo的生命周期，expo社區交流方式，expo學習必備資源，開發使用expo時關註的一些問題

Expo大作戰(三)--針對已經開發過react native項目開發人員有針對性的介紹了expo，expo的局限性，開發時項目選型註意點等

Expo大作戰(四)--快速用expo構建一個app，expo中的關鍵術語

Expo大作戰(五)--expo中app.json 文件的配置信息

Expo大作戰(六)--expo開發模式，expo中exp命令行工具，expo中如何查看日誌log，expo中的調試方式

Expo大作戰(七)--expo如何使用Genymotion模擬器

Expo大作戰(八)--expo中的publish以及expo中的link，對link這塊東西沒有詳細看，大家可以來和我交流

更多>>

接下來就開始擼碼

---

預載入和緩存資產(Preloading & Caching Assets)

根據資產的存儲位置和使用方式不同，資產會被緩存。本指南提供了確保只在需要時才下載資產的最佳實踐。為了在緩存資源時保持載入屏幕可見，最好還是渲染Expo.AppLoading並且只有該組件完成，直到所有內容都準備就緒。另請參閱：離線支持。

對於保存到本地文件名的圖像，使用Expo.Asset.fromModule(image).downloadAsync()下載並緩存圖像。還有一個 loadAsync()輔助方法來緩存一批資產。

對於Web圖像，請使用Image.prefetch(image)。然後正常地繼續參考圖像，例如與<Image source={require('path/to/image.png')} />。

使用Expo.Font.loadAsync(font)預裝字體。在這種情況下，Font參數是一個對象，如下所示：{OpenSans: require('./assets/fonts/OpenSans.ttf')}。 @expo/vector-icons為這個對象提供了一個有用的快捷方式，你可以在下麵看到FontAwesome.font。

import React from 'react';
import { AppLoading, Asset, Font } from 'expo';
import { View, Text, Image } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

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));
}

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

  async _loadAssetsAsync() {
    const imageAssets = cacheImages([
      'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
      require('./assets/images/circle.jpg'),
    ]);

    const fontAssets = cacheFonts([FontAwesome.font]);

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

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

    return (
      <View>
        <Text>Hello world, this is my app.</Text>
      </View>
    );
  }
}

(本實例代碼，可以在github上查看)See a full working example in github/expo/new-project-template.

下麵繼續介紹Icon

圖標 (Icon)

就像現在這樣流行，並非每個應用都必須為所有圖標使用表情符號