簡要：本系列文章講會對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)

就像現在這樣流行，並非每個應用都必須為所有圖標使用表情符號?? (As trendy as it is these days, not every app has to use emoji for all icons ??)- 也許您想通過FontAwesome，Glyphicons或Ionicons等圖標字體吸引人氣的集合，或者您只是使用一些您仔細挑選的PNG 名詞項目（expo目前不支持SVG）。 讓我們看看如何做到這兩種方法。

@expo/vector-icons

該庫默認安裝在通過XDE或exp創建的模板項目上 - 它是expo軟件包的一部分。 它包括流行的圖標集，您可以使用@expo/vector-icons directory.目錄瀏覽所有圖標。

import React from ‘react‘;
import { Ionicons } from ‘@expo/vector-icons‘;

export default class IconExample extends React.Component {
  render() {
    return (
      <Ionicons name="md-checkmark-circle" size={32} color="green" />
    );
  }
}

如果此組件尚未加載，則加載Ionicons字體，並呈現通過上述vector-icons目錄找到的復選標記圖標。 @expo/vector-icons建立在react-native-vector-icons之上，並使用類似的API。唯一的區別是@expo/vector-icons使用更慣用的 import 風格,eg：

import { Ionicons } from ‘@expo/vector-icons‘; 而不是 import Ionicons from ‘react-native-vector-icons/Ionicons‘;.

註意：與expo中的任何自定義字體一樣，您可能希望在呈現您的應用程序之前預先加載圖標字體。字體對象可用作字體組件的靜態屬性，因此在上面的情況下，它是Ionicons.font，它的計算結果為{ionicons: require(‘path/to/ionicons.ttf‘)}。詳細了解預加載資產,請看上一部分。

自定義圖標字體(Custom Icon Fonts)

首先，確保您導入自定義圖標字體。閱讀更多關於加載自定義字體的信息.一旦你的字體已經加載，你需要創建一個圖標集。 @expo/vector-icons公開了三種幫助您創建圖標集的方法。

1. createIconSet

根據glyphMap返回您自己的自定義字體，其中，icon name是鍵名，值為UTF-8字符或其字符代碼。 fontName(修改官網)是字體的名稱而不是文件名。有關更多詳細信息，請參閱react-native-vector-icons。

import { Font } from ‘expo‘;
import { createIconSet } from ‘@expo/vector-icons‘;
const glyphMap = { ‘icon-name‘: 1234, test: ‘?‘ };
const CustomIcon = createIconSet(glyphMap, ‘FontName‘);

export default class CustomIconExample extends React.Component {
  state = {
    fontLoaded: false
  }
  async componentDidMount() {
    await Font.loadAsync({
      ‘FontName‘: require(‘assets/fonts/custom-icon-font.ttf‘)
    });

    this.setState({fontLoaded: true});
  }
  render() {
    if (!this.state.fontLoaded) { return null;}

    return (
      <CustomIcon name="icon-name" size={32} color="red" />
    );
  }
}

　　　　2.createIconSetFromFontello

基於Fontello配置文件創建自定義字體的便捷方法。 不要忘記像上面描述的那樣導入字體，並使用Font.loadAsync將config.json放置在項目中方便的地方。

// Once your custom font has been loaded...
import { createIconSetFromFontello } from ‘@expo/vector-icons‘;
import fontelloConfig from ‘./config.json‘;
const Icon = createIconSetFromFontello(fontelloConfig, ‘FontName‘);

　　　　3.createIconSetFromIcoMoon
基於IcoMoon配置文件創建自定義字體的便捷方法。 不要忘記像上面描述的那樣導入字體，並使用Font.loadAsync將config.json放置在項目中方便的地方。

// Once your custom font has been loaded...
import { createIconSetFromIcoMoon } from ‘@expo/vector-icons‘;
import icoMoonConfig from ‘./config.json‘;
const Icon = createIconSetFromIcoMoon(icoMoonConfig, ‘FontName‘);

Icon images

如果你知道如何使用反應原生的<Image>組件，這將是一件輕而易舉的事情。

import React from ‘react‘;
import { Image } from ‘react-native‘;

export default class SlackIcon extends React.Component {
  render() {
    return (
      <Image
        source={require(‘../assets/images/slack-icon.png‘)}
        fadeDuration={0}
        style={{width: 20, height: 20}}
      />
    );
  }
}

假設我們的SlackIcon類位於my-project/components/SlackIcon.js中，並且我們的圖標圖像位於my-project/assets/images中，以便引用我們使用的需要並包含相對路徑的圖像。 您可以提供不同像素密度的圖標版本，並自動為您使用適當的圖像。 在這個例子中，我們實際上有[email protected]和[email protected]，所以如果我在iPhone 6s上查看這個圖片，我會看到的圖片是[email protected]。 更多內容請參見react-native文檔中的圖像指南。

我們還將fadeDuration（這是Android特定屬性）設置為0，因為我們通常希望圖標立即出現，而不是在幾百毫秒內淡入。

---

下一張繼續介紹，這一篇主要介紹了：expo中的預加載和緩存資產(Preloading & Caching Assets),expo中的圖標 (Icon) 歡迎大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公

眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！

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