七、Expo的初始化与运行

初始化并运行

本第一个指南的目的是尽快启动和运行Expo应用程序。

此时我们应该在我们的开发机器上安装Expo CLI,在iOS或Android物理设备或模拟器上安装Expo客户端。如果没有,请在继续之前返回“安装expo”。

好吧,让我们开始吧。

创建项目

运行expo init以创建项目。系统会要求您为项目命名。该项目将在当前工作目录中具有该名称的新目录中创建。例如起名first-project,然后按回车键。

接下来,您可以选择要使用的项目模板。选择该tabs选项,因为这将为我们提供一个方便的起点。

Expo CLI现在正在初始化一个新项目:它复制一个基本模板并安装react,react-native和expo。

当项目初始化并准备就绪时,命令将退出。

启动开发服务器

进入到项目文件夹并键入npm start以启动Expo CLI的本地开发服务器。

Expo CLI启动Metro Bundler,它是一个HTTP服务器,使用Babel编译我们应用程序的JavaScript代码并将其提供给Expo应用程序。它还会在您的默认Web浏览器中弹出Expo Dev Tools,这是一个用于开发应用程序的控制面板。

注意:如果您使用MacOS并且Expo CLI卡住了Starting project at <path>,您可能需要在您的计算机上安装Watchman。要做到这一点,最简单的方法是用自制,brew install watchman。

在手机或模拟器上打开应用程序

在您的设备上查看应用程序的最快方法是使用Expo帐户登录Expo CLI(您可以通过在运行开发服务器的终端窗口中注册)然后使用相同的帐户进行登录进入Expo Client移动应用程序。登录后,您当前项目的链接将自动显示在手机上的Expo Client中。

或者,在终端或Send link with email/SMS…开发工具中按下可发送带有链接的消息,您可以在手机上轻触该链接以打开该应用程序。您可以与安装了Expo Client应用程序的任何其他人共享此链接,但只有您使用Expo CLI运行项目时才能使用此链接。

要在iOS模拟器中打开应用程序,您可以在开发工具中的按Run on iOS simulator选项。要在Android模拟器中打开应用程序,请首先将其启动模拟器,然后在开发工具中按Run on Android device/emulator 。

最后,您还将在终端和Dev Tools中看到QR码。打开项目的另一种快速方法是使用Android 或iOS上的Expo CLI扫描QR码。

做出你的第一个改变

screens/HomeScreen.js在新项目中打开并更改render()函数中的任何文本。您应该会看到您的应用重新加载您的更改。

看不到你的变化?

默认情况下启用实时重新加载,但我们只是确保我们检查一下步骤以启用它,以防某些事情无法正常工作。

首先,确保在Expo CLI中启用了开发模式

接下来,关闭应用程序并重新打开它。

再次打开应用程序后,摇动设备以显示开发人员菜单。如果您使用的是模拟器,请按⌘+d(iOS)或ctrl+m(Android)。

如果你看到Enable Live Reload,按下它,你的应用程序将重新加载。如果您看到Disable Live Reload然后退出开发人员菜单并尝试进行其他更改。

手动重新加载应用程序

如果您已按照上述步骤操作并且实时重新加载仍然无效,请发布到Expo论坛向我们发送支持请求。在我们为您解决问题之前,您可以摇动设备并按Reload,或使用以下工具之一,这两种工具都可以在无开发模式下工作。


 您已经创建了一个新的Expo项目,进行了更改,并看到它更新。

下一步

其他资源有学习的大量有用资源。

阅读有关Expo SDK的信息,了解我们提供的一些有用的API。

阅读我们的其他一些指南,例如如何实施推送通知,我们如何为您处理资产,或如何构建您可以提交给Apple或Google的独立应用程序

加入我们的Slack,让您的问题得到解答。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,817评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,143评论 2 59
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,288评论 19 139
  • 利用代理排错 MacOS代理配置(Sierra) 如果发生了错误,您可以在系统网络设置中切到自动代理设置,使用自动...
    ladybug阅读 12,742评论 0 5
  • 2017新年伊始,今天又是大年初一,百无聊赖中想选一部贺岁片看看。提到贺岁片,感觉最成功的还是13年前,也就是20...
    琳羽凡阅读 1,142评论 5 3