简要:本系列文章讲会对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)的更多相关文章

  1. js中的预加载与懒加载(延迟加载)

    js中加载分两种:预加载与延迟加载 一.  预加载,增强用户的体验,但会加载服务器的负担.一般会使用多种 CSS(background).JS(Image).HTML(<img />) . ...

  2. Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)

    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...

  3. laravel 关联中的预加载

    预加载 当作为属性访问 Eloquent 关联时,关联数据是「懒加载」的.意味着在你第一次访问该属性时,才会加载关联数据.不过,是当你查询父模型时,Eloquent 可以「预加载」关联数据.预加载避免 ...

  4. ViewPager的刷新、限制预加载、缓存所有

    [框架]: 公共部分:左侧菜单.TitleBar.RadioGroup(3个RadioButton:X.Y.Z) 选择X页面:指示器+ViewPager [要达成的效果]: (1)左侧选择A,进入X页 ...

  5. 开发中清除css加载的缓存使用

  6. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. 微信 OAuth2 网页授权获取用户信息

    文档:http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html !!! 微信跟用户没有关系类接口采用了OAUTH2 [ ...

  2. VMWare Workstation 11的安装

    不多说,直接上干货! 说白了   VMWare Workstation是收费的! VMware Player 和 VirtualBox是免费的! 虚拟机软件可让你在一个操作系统上直接运行的多个不同的虚 ...

  3. discuz 文件模板edit

    1.修改title Power by discuz! 位置:template/default/common   --->header_common.htm 2.discuz.htm 文件路径(修 ...

  4. Docker: vmware企业级docker镜像私服--Harbor的搭建

    1.下载harbor,地址https://github.com/vmware/harbor2.进入harbor-master/Deploy目录,修改harbor.cfg文件,主要修改以下信息      ...

  5. nginx 跳转系列

    1.nginx强制跳转https配置,通过http状态吗实现,http状态吗地址: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/3 ...

  6. [转]Reporting Services 中的身份验证类型

    本文转自:https://docs.microsoft.com/zh-cn/previous-versions/sql/sql-server-2008/cc281310%28v%3dsql.100%2 ...

  7. Hibernate自身一对多和多对多关系映射

    一对多关系映射大家都明白,关系双方都一个含有对方多个引用,但自身一对多很多同学都不明白什么意思,那么首先我就说明一下什么是自身一对多,其实也很好理解,自身一对多就是自身含有本身的多个引用,例如新闻类别 ...

  8. Oracle TO_DATE() 函数格式化时间【全】

    TO_DATE格式(以时间:2007-11-02   13:45:25为例)          Year:             yy two digits 两位年                显 ...

  9. Mysql系统知识梳理

    1 数据库分类 MySQL Oracle redis 2 MySQL 存储引擎有哪些 ENGINE=InnoDB 提供事务安全表,支持外键. MyISAM Memory数据存入内存中,如果内存出现异常 ...

  10. 测试单元测试完毕关闭jvm

    今天一天都在纠结Netty中的服务器端究竟是如何实现自动关闭的, 吃完晚饭才发现原来不是netty关闭,是测试单元关闭的...