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

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

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

05-08 08:31