Expo大作战--expo中的预加载和缓存资产(Preloading & Caching Assets),expo中的图标 (Icon)

Posted 2020-10-27

简要：本系列文章讲会对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)

就像现在这样流行，并非每个应用都必须为所有图标使用表情符号

以上是关于Expo大作战--expo中的预加载和缓存资产(Preloading & Caching Assets),expo中的图标 (Icon)的主要内容，如果未能解决你的问题，请参考以下文章

Expo大作战--expo中的App Icon,expo中的Assets,expo中的ErrorHandling错误处理

Expo大作战(四十一)完--expo sdk 之 Assets，BarCodeScanner，AppLoading

Expo大作战(十四)--expo中消息推送的实现

Expo大作战--expo如何使用Genymotion模拟器

Expo大作战(二十六)--expo sdk api之Video和WebBrowser

Expo大作战(二十三)--expo中expo kit 高级属性（没干货）