Expo Mannul
Expo Manual
- ### 1. 基础借助Expo工具，服务和React，您可以从同一JavaScript代码库在本机Android，iOS和Web应用程序上构建，部署和快速迭代。
-
访问设备功能，如摄像头，位置，通知，传感器，触觉，和更多的，所有通用的API。
-
生成服务使您可以在应用商店中准备就绪的二进制文件并处理证书，而无需Xcode或Android Studio。
-
通过空中更新，您可以随时更新应用程序，而无需麻烦和拖延提交商店。
1.1，开始使用
brew install node && brew install watchman && sudo gem install cocoapods
以上是安装一个基本的环境；它完成 Node \ watchman文件实时更新 \ cocoapods IOS模拟器。
expo init 项目名称
完成创建您自己的expo项目。
运行：
expo start
浏览器开启显示 Metro Bundler
如果没有，你需要下载 Expo Dev Tools
如果你需要单独的测试应该程序，你可以下载 react-native-debugger
1.2，界面设计、分享图片或其它库
选择EXPO的好处在于，Expo开发了一系列的 开发包组件库 在 SDK API 参考。可以安装SDk的版本使用API ,我们可以直接进行使用。下载分享图片选择器与分享图片的案例。
- 关于界面的设计
请参考React 参考文档 与 react native design、如果我们需要更多的交互，如：创建交互的按钮。 - 分享图片
假如我们需要分享一张本地手机的图像到网络，我们提交先使用 expo-image-picker 依赖包来实现图像的选择；然后使用 expo-sharing 包用于分享图片；
# 首先需要安装命令
expo install expo-image-picker
expo install expo-sharing
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as Sharing from 'expo-sharing';
export default function App() {
let [selectedImage, setSelectedImage] = React.useState(null);
let openImagePickerAsync = async () => {
let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();
if (permissionResult.granted === false) {
alert('Permission to access camera roll is required!');
return;
}
let pickerResult = await ImagePicker.launchImageLibraryAsync();
if (pickerResult.cancelled === true) {
return;
}
setSelectedImage({ localUri: pickerResult.uri });
};
let openShareDialogAsync = async () => {
if (!(await Sharing.isAvailableAsync())) {
alert(`Uh oh, sharing isn't available on your platform`);
return;
}
Sharing.shareAsync(selectedImage.localUri);
};
if (selectedImage !== null) {
return (
<View style={styles.container}>
<Image source={{ uri: selectedImage.localUri }} style={styles.thumbnail} />
<TouchableOpacity onPress={openShareDialogAsync} style={styles.button}>
<Text style={styles.buttonText}>Share this photo</Text>
</TouchableOpacity>
</View>
);
}
return (
<View style={styles.container}>
<Image source={{ uri: 'https://i.imgur.com/TkIrScD.png' }} style={styles.logo} />
<Text style={styles.instructions}>
To share a photo from your phone with a friend, just press the button below!
</Text>
<TouchableOpacity onPress={openImagePickerAsync} style={styles.button}>
<Text style={styles.buttonText}>Pick a photo</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
width: 305,
height: 159,
marginBottom: 20,
},
instructions: {
color: '#888',
fontSize: 18,
marginHorizontal: 15,
marginBottom: 10,
},
button: {
backgroundColor: 'blue',
padding: 20,
borderRadius: 5,
},
buttonText: {
fontSize: 20,
color: '#fff',
},
thumbnail: {
width: 300,
height: 300,
resizeMode: 'contain',
},
});
在线观看；
1.3， iOS和Android共享API的工作方式以及Web共享API的工作方式
世博工具试图为您解决iOS，Android，Web（和不同的Web浏览器）之间的这些差异，但是目前并不行，从技术上讲，最新版本的Android版Chrome可以共享文件，但是它是非常新的，expo-sharing 目前不被支持。iOS和Android共享API的工作方式以及Web共享API的工作方式之间有两个重要区别。
- 它并不一直在网络上可用。
- 我们无法在网络上共享本地文件URI
解决方案：
通过将文件上传到某些Web服务，然后让用户复制URL，我们将解决对Web Share API的支持不一而又缺乏对从我们的设备共享文件的支持的问题。
运行 expo install anonymous-files 以安装库来为我们处理文件上传，然后对您的应用进行以下更改：
import React from 'react';
import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as Sharing from 'expo-sharing';
import uploadToAnonymousFilesAsync from 'anonymous-files';
export default function App() {
const [selectedImage, setSelectedImage] = React.useState(null);
let openImagePickerAsync = async () => {
let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();
if (permissionResult.granted === false) {
alert('Permission to access camera roll is required!');
return;
}
let pickerResult = await ImagePicker.launchImageLibraryAsync();
if (pickerResult.cancelled === true) {
return;
}
if (Platform.OS === 'web') {
let remoteUri = await uploadToAnonymousFilesAsync(pickerResult.uri);
setSelectedImage({ localUri: pickerResult.uri, remoteUri });
} else {
setSelectedImage({ localUri: pickerResult.uri, remoteUri: null });
}
};
let openShareDialogAsync = async () => {
if (!(await Sharing.isAvailableAsync())) {
alert(`The image is available for sharing at: ${selectedImage.remoteUri}`);
return;
}
Sharing.shareAsync(selectedImage.localUri);
};
/* the rest of the app is unchanged */
}
1.4，如何启动屏幕和应用程序图标
在这里将接触到 app.json 文件；
比如：我想要修改启动界面头部的背景颜色：
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#000000"
},
- 修改启动界面：
设计师我们需要一个1242px宽x 2436px高的初始屏幕图像；将此图像保存到assets项目内部的目录中并调用 app.json 中要引入图片的文件名称。也就是可以同名替换或是不同名称的采取修改。 - 修改应用图标：
我们的设计师为我们提供了这个1024px宽x 1024px高的应用图标：将此图像保存到assets项目内部的目录中，替换icon.png 文件 。
1.5，保持学习
2，工作流程和常见问题
.2.1, managed workflows (托管工作)
使用托管工作流，您只需编写JavaScript / TypeScript和Expo工具和服务即可为您完成其余工作。
如果您使用的React Native没有任何Expo工具，那么您使用的是“ Bare工作流程” 我们称此“ bare”为开玩笑，是因为“bare metal”一词，有了它的名字，谈论起来就更容易了。已经使用React Native的开发人员提供有关使用Expo时将遇到的一些关键概念，资源和差异的快速概述 ：https://docs.expo.io/workflow/already-used-react-native/。
托管工作流程类似于React Native的“ Rails ”和“ Create React App ”。
应用是使用expo-cli，移动设备上的Expo客户端以及我们的各种服务通过托管工作流构建的：推送通知，构建服务和空中（OTA）更新。世博会尽力为您管理构建应用程序的尽可能多的复杂性，这就是为什么我们称其为托管工作流。使用托管工作流的开发人员不使用Xcode或Android Studio，他们只是编写JavaScript代码并通过app.json管理诸如应用程序图标和启动屏幕之类的配置。Expo SDK公开了一组越来越全面的API，使您能够访问设备功能，例如相机，生物特征认证，文件系统，触觉等。
尽管您可以对托管工作流做很多_事情_，但您却不能做_所有事情_，所以遇到限制时您有什么选择？
-
并非所有iOS和Android API都可用
支持许多设备API（请查看边栏中的“ SDK API参考”），但并非所有iOS和Android API都可用：是否需要蓝牙？抱歉，我们尚未建立对此的支持。WebRTC？不完全的。我们收到的最常见请求之一是应用内购买以及Apple和Google Pay集成。我们尚未构建它，但它已在路线图上。我们一直在不断增加新的API，因此，如果现在没有您需要的东西，则可以使用简单的工作流程，也可以关注我们的博客以查看SDK更新的发行说明。功能优先级并不是严格根据大众投票决定的，但是它无疑可以帮助我们评估对用户重要的内容。
-
SDK不支持所有类型的后台代码执行
后台执行是在未前台运行或设备处于休眠状态时运行代码的功能。我们支持背景地理定位（包括地理围栏）和背景提取，但是我们尚不支持操作系统播放控件提供背景音频，并且您无法在后台处理推送通知。这是一个进展中的工作.
-
如果您需要使应用程序 大小 保持精简，则托管工作流可能不是最佳选择
iOS上托管的Expo应用程序的大小约为✅20mb（下载），而Android约为✅15mb。这是因为“托管”包含一堆API，无论您是否使用它们-都可以通过无线方式推送更新以使用新的API，但要以二进制大小为代价。所包含的某些API与您可能未使用的服务相关，例如，出于类似原因，所包含的Facebook Mobile SDK也支持Facebook Login和Facebook Ads，以及Google Mobile SDK。将来我们将使其可定制，因此您可以减小二进制文件的大小。在此处阅读有关管理应用大小的更多信息。
-
SDK中通常不包含与专有服务集成的本机库
与上一点有关，如果绑定了外部专有服务，我们通常会避免将本机模块添加到SDK中- 我们不能仅仅因为一些用户的应用需要将本机模块添加到SDK中，它针对更广泛的用户群。在这些情况下，开发人员将希望使用✅Bare workflow ，并且他们可以通过✅弹出轻松地迁移到该工作流程。
-
唯一受支持的推送通知服务是Expo通知服务
如果要使用其他推送通知服务（例如OneSignal）而不是Expo Push Notification Service / API，则需要使用bare工作流程。
-
支持的最低操作系统版本为Android 5+和iOS 10+
如果需要支持旧版本，则将无法使用托管工作流程。
-
免费构建有时可能会排队
您可以使用免费的独立构建服务轻松构建要提交给商店的应用程序，甚至无需安装Xcode或Android Studio ，但有时会出现队列，具体取决于当时有多少其他人在构建二进制文件。您可以使用“优先级”计划访问专用的构建基础结构，也可以根据需要在自己的CI上运行构建。
2.2, bare workflows （直接工作）
在 bare 的工作流程中，您可以完全控制本机项目的各个方面，而Expo工具的帮助则远远不够。
# If you don't have expo-cli yet, get it
npm i -g expo-cli
# If you don't have react-native-cli yet, get it
npm i -g react-native-cli
# This is a shortcut to skip the UI for picking the template
expo init --template bare-minimum
~~~
2.3, 工作流程比较
2.4，哪种工作流程适合我？
-
🚫🔒Expo 永远不会锁定您，您可以随时“弹出”，并且您的项目将只是具有安装和配置的React Native和Expo SDK软件包的典型本地项目。
-
🆕 如果您是移动开发的****新手，或者通常是开发的新手，我们建议您使用托管工作流。本机开发工具链伴随着大量的复杂性，托管工作流仅在绝对必要时才允许您处理这种复杂性。
3，更多
实用的命令：
expo diagnostics 切换在项目目录，这个命令帮你诊断环境;
expo init project_your 创建一个新的项目;
3.1，也许需要我们需要懂得这些基本知识。
- sentry-expo ； 提供了一个应用程序监视平台，可以帮助您实时识别问题。
- redux-persist 中间件； 持续的存在和补充redux store , 用面向切面的方式优雅的解决 store 持久化。
- { PersistGate } from 'redux-persist/es/integration/react' ； 延迟呈现应用程序UI的时间，直到检索到您的持久状态并将其保存到redux。
- @； 该符号是一个JavaScript表达式 >最新仓库 > 简单介绍 decorators；2020-5月止这个用法还没有内置于Javascript。但是可以使用 Babel 来使用它。通常 @ 应用于配置路径别名，简化import Component的方式;
![]({"src": "img/720x200.gif", "width" : 720, "height" : 200})
