Expo大作战(一)--什么是expo，如何安装expo clinet和xde，xde如何使用

1368 0 0

作者:鸟窝

简要：本系列文章讲会对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这块东西没有详细看，大家可以来和我交流

接下来就开始撸码

介绍

Expo是什么？Expo是一组工具，库和服务，可让您通过编写JavaScript来构建原生iOS和Android应用程序。

转到快速入门开始构建！

快速开始

Expo是一组工具，库和服务，可让您通过编写JavaScript来构建原生iOS和Android应用程序。

详细介绍

Expo应用程序是包含Expo SDK的React Native应用程序。 SDK是一个native-and-JS库，可以访问设备的系统功能（如相机，联系人，本地存储和其他硬件）。这意味着您不需要使用Xcode或Android Studio，也不需要编写任何本机代码，而且它还使得您的pure-JS项目非常便于携带，因为它可以在任何包含Expo SDK的本机环境中运行。

Expo还提供UI组件，以处理几乎所有应用程序都会覆盖但未被烘焙到React Native核心（expo有rn中没有）中的各种使用案例，例如，图标，模糊视图等等。

最后，Expo SDK提供了访问服务的功能，这些服务通常很难管理，但几乎所有应用都需要这些服务。其中最受欢迎的是：Expo可以为您管理您的资产，它可以为您提供推送通知，并且可以构建可以部署到应用商店的本机二进制文件。

安装

您需要使用两种工具来开发Expo应用程序 - 一个桌面开发工具和一个移动客户端来打开您的应用程序。

桌面开发工具：XDE

XDE代表Expo的开发环境。它是一个独立的桌面应用程序，包含您需要启动的所有依赖关系。

为macOS，Windows（64位）或Linux下载最新版本的XDE。

在Linux上，使用chmod a + x xde * .AppImage和./xde*.AppImage打开。

移动客户端开发工具：Expo(适用于iOS和Android)

expo客户端就像是一个用expo建造的应用程序浏览器。当您在项目中启动XDE时，它会为您生成一个独特的开发网址，您可以在iOS或Android上的expo客户端上访问它，无论是在真实设备上还是在模拟器中。

安装在你的设备上

你可以从Play商店下载Android版或从App Store下载iOS版（这里需要FQ，当然我也有下载好的版本，不会FQ可以找我教你）

所需的Android和iOS版本：Android版本Expo支持的最低的是Android 4.4，最低的iOS版本是iOS 9.0。

您不需要在仿真器/模拟器上手动安装Expo客户端，因为XDE会自动完成。请参阅本指南的下一部分。

iOS模拟器

通过Apple App Store安装Xcode。这会需要一段时间，去小睡一下。接下来，打开Xcode，转到首选项并单击Components选项卡，从列表中安装一个模拟器。

一旦模拟器打开并且您有一个在XDE中打开的项目，您可以在XDE的iOS模拟器上按下Open，它会将Expo Client安装到模拟器并在其中打开您的应用程序。

如果不工作？这是偶然，XDE会自动安装Expo Client，通常是由于您的环境或Xcode工具链中的细微差异造成的。如果您需要手动在模拟器上安装Expo Client，

您可以按照以下步骤操作：

下载最新的模拟器构建。

提取存档的内容。你应该得到一个像Exponent-X.XX.X这样的目录。

确保模拟器正在运行。

在终端上，运行xcrun simctl install booted [提取目录的路径]。

Android模拟器

下载Genymotion（免费版）并按照Genymotion安装指南。（国内小伙伴们咱们用夜神模拟器也可以）安装Genymotion后，创建一个虚拟设备 - 我们推荐使用Nexus 5，Android版本由您决定。准备好后启动虚拟设备。

一旦模拟器打开并且您有一个项目在XDE中打开，您可以按XDE中的Android上的Expo项目中的Open project，它会将Expo客户端安装到模拟器并在其中打开您的应用程序。如果遇到任何问题，请按照我们的Genymotion指南进行操作。

Node.js

要开始使用Expo，您不一定需要安装Node.js，但只要您开始真正构建您想要的东西。下载最新版本的Node.js。

看守者(Watchman)

如果一些macOS用户没有在他们的机器上安装它，会遇到问题，因此我们建议您安装Watchman。 Watchman在更改时观察文件和记录，然后触发相应的操作，并由React Native在内部使用。下载并安装Watchman。

XDE使用介绍(XDE Tour)

登录屏幕（Sign in screen）（第一次打开）

当您第一次打开XDE时，您将通过此登录屏幕迎接。如果您已经有帐户，请继续登录。如果您没有帐户，请使用Github登录或注册一个帐户。
XDE登录屏幕

主屏幕（Home screen）

成功，你登录了！在这个屏幕上你可能想要创建一个新项目或打开一个新项目。我们列出了一些最近打开的项目，以方便使用。

XDE主页

项目对话框（Project dialog）

点击项目，你会看到你可以从这里做的一切。当然，你不能关闭一个项目或在查找器等中显示它，因为你还没有打开一个项目。

XDE项目对话框

退出（Sign out）

您随时可以点击右上角的用户名并退出。或注销。谁能真正同意这个言论？
XDE退出

项目屏幕(Project screen)

所以我们开了一个新项目。左侧窗格是React Packager，您可以在Up and Running和Expo Expo中了解更多信息。右窗格用于设备日志，您可以在查看日志中阅读更多信息。
XDE项目

分享(Share)

通过互联网连接向任何人发送链接到您的应用程序。如果您没有连接到您的计算机，这对于获取设备上的链接也很有用。
XDE发送链接

在设备上打开(Opening on a device)

设备按钮可让您快速在设备或模拟器上打开您的应用程序。在启动和运行中阅读更多内容。
XDE在设备上打开

开发模式(Development mode)

您经常希望以开发模式处理您的项目。这使得它运行得更慢一些，因为它增加了许多代码的运行时验证，以警告您潜在的问题，但它也使您能够实时重新加载，热重新加载，远程调试和元素检查器。如果要测试与性能相关的任何内容，请禁用开发模式并重新加载您的应用。XDE项目开发模式

项目对话框（打开项目）||(Project dialog (with project open))

除了主屏幕提供的选项外，打开项目后，我们还可以访问一些快捷方式，例如在finder中显示项目目录。
打开项目中的XDE项目对话框

发布(Publish)

当您处理您的项目时，会为您提供一个临时URL，并通过您的计算机提供。当您准备与其他人分享项目时，您可以发布该项目以获取任何人都可以使用Expo Client打开的永久URL（类似于expo.io/@your-username/your-app-slug）。

当您点击XDE中的发布按钮时，系统会要求您确认您希望您的项目向公众开放。 XDE需要一些时间来生成缩小的JS包，并将您的资源上传到我们的服务器，一旦完成，打印出您应用的发布的URL。您可以阅读关于如何在expo工作和发布指南中了解更多详细信息。
XDE发布

下一张继续介绍，这一篇主要介绍了：什么是expo，如何安装expo clinet和xde，xde如何使用！欢迎大家关注我的微信公众号，这篇文章是否被大家认可，我的衡量标准就是公

众号粉丝增长人数。欢迎大家转载，但必须保留本人博客链接！