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)

就像现在这样流行，并非每个应用都必须为所有图标使用表情符号?? (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中，以便引用我们使用的需要并包含相对路径的图像。 您可以提供不同像素密度的图标版本，并自动为您使用适当的图像。 在这个例子中，我们实际上有slack-icon@2x.png和slack-icon@3x.png，所以如果我在iPhone 6s上查看这个图片，我会看到的图片是slack-icon@3x.png。 更多内容请参见react-native文档中的图像指南。

我们还将fadeDuration（这是Android特定属性）设置为0，因为我们通常希望图标立即出现，而不是在几百毫秒内淡入。

---

下一张继续介绍，这一篇主要介绍了：expo中的预加载和缓存资产(Preloading & Caching Assets),expo中的图标 (Icon) 欢迎大家关注我的微信公众号，这篇文章是否被大家认可，我的衡量标准就是公

众号粉丝增长人数。欢迎大家转载，但必须保留本人博客链接！