简要：本系列文章讲会对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)
就像现在这样流行，并非每个应用都必须为所有图标使用表情符号