关于vue.js:翻译-JavaScript-Everywhere第21章-使用React-Native创建移动应用程序

翻译 |《JavaScript Everywhere》第 21 章 应用 React Native 创立挪动应用程序

写在最后面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦

第 21 章 应用 React Native 创立挪动应用程序

在 1980 年代前期的某一天，当我正和父母一起购物，发现了一台小型便携式电视，这是一个由电池供电的方盒，带有天线、小扬声器和一个玲珑的黑白屏幕。

在周六早上的院子里，我被看到的卡通片震惊到了。

只管我可能永远不会领有一个这样的电视，然而只有晓得存在这样一种设施，我就会感觉本人生存在科幻小说的将来世界中。

我齐全不晓得我成年后会在口袋里携带一个设施，使我不仅能够观看宇宙巨匠，还能够拜访有限的信息，听音乐，玩游戏，做笔记，拍照。叫汽车，买货色，查看天气并实现有数的其余工作。

2007年，史蒂夫·乔布斯（Steve Jobs）推出了 iPhone，他说：“每隔一段时间，就会呈现革命性产品，它扭转了所有。当然，智能手机是在2007 年之前存在的，然而直到 iPhone 的衰亡（以及随后的 Android 的衰亡），它们才真正变得智能。在过来的几年中，智能手机应用程序曾经超过了最后的“所有皆有”淘金热阶段，已成为用户要求品质并寄予厚望的事物。

当今的应用程序具备高标准的性能、交互和设计。

更糟的是，古代挪动利用程序开发扩散在 Apple iOS 和Android平台上，每种平台应用不同的编程语言和工具链。

你可能曾经猜到了（它就在书名），但 JavaScript 使咱们的开发人员能够编写跨平台的挪动应用程序。

在本章中，我将介绍跨平台的库：React Native以及 Expo 工具链。

咱们还将克隆示例我的项目代码，这将在接下来的几章中进行构建。

咱们正在构建什么

在接下来的几章中，咱们将为 Notedly 社交笔记应用程序构建一个挪动客户端版本。指标是应用 JavaScript 和Web技术来开发用户能够在其挪动设施上装置的应用程序。咱们将实现性能的一部分，以防止在 Web 应用程序章节中过多反复。具体来说，咱们的应用程序将：

• 在 iOS 和Android操作系统上均可应用
• 从咱们的 GraphQL API 加载笔记摘要和单个用户笔记
• 应用 CSS 和款式化的组件进行款式化
• 执行规范和动静的路由

这些性能将全面概述应用 React Native 开发挪动应用程序的外围概念。在开始之前，让咱们认真看一下将要应用的技术。

咱们将如何构建它

React Native是咱们将用于开发应用程序的核心技术。React Native容许咱们在 JavaScript 中应用 React 编写应用程序，并为本地挪动平台出现它们。对于用户而言，这意味着 React Native 应用程序与以平台的编程语言编写的应用程序之间没有显著的区别。这是 React Native 绝对于其余风行的基于 Web 技术的挪动框架的次要劣势，该框架通常将 Web 视图包装在应用程序 shell 中。Facebook，Instagram，彭博，特斯拉，Skype，沃尔玛，Pinterest和许多其余公司已应用 React Native 来开发应用程序。

咱们的利用程序开发工作流程的第二个要害局部是 Expo，这套工具和服务通过真正有用的性能简化了React Native 开发，例如设施上预览，应用程序构建和扩大外围 React Native 库。在开始咱们的开发之前，倡议你执行以下操作：

1. 拜访 expo.io并创立一个 Expo 帐户。
2. 通过在终端应用程序中键入 npm install expo-cli --global 来装置 Expo 命令行工具。
3. 通过在终端应用程序中键入 expo login 本地登录你的 Expo 帐户。
4. 为你的挪动设施装置 Expo Client 应用程序。能够在 expo.io/tools 中找到指向 Expo Client iOS 和Android应用程序的链接。
5. 在 Expo Client 应用程序中登录你的帐户。

最初，咱们将再次应用 Apollo Client 与 GraphQL API 中的数据进行交互。Apollo Client蕴含用于应用 GraphQL 的一系列开源工具。

入门

在开始开发之前，你须要将我的项目启动程序文件复制到你的计算机上。该项目标源代码蕴含所有脚本和对第三方库的援用，这些第三方库是咱们开发应用程序所需的。

要将代码克隆到本地计算机，请关上终端，导航到保留我的项目的目录，而后 git clone 我的项目存储库。

如果你曾经浏览了 API，Web 和desktop章节，则可能曾经创立了一个 notedly 目录来放弃我的项目代码的条理性：

$ cd Projects
$ # type the `mkdir notedly` command if you don't yet have a notedly directory
$ cd notedly
$ git clone git@github.com:javascripteverywhere/mobile.git
$ cd mobile
$ npm install

装置第三方依赖项

通过制作本书的入门代码的正本并在目录中运行 npm install ，你无需为任何第三方依赖项再次运行 npm install 。

该代码的构造如下：

• /src

这是你随书一起进行开发的目录。

• /solutions

该目录蕴含每章的解决方案。
如果你卡住了，这些能够供你参考。

• /final

该目录蕴含最终的工作我的项目。

其余文件和我的项目设置都适配了 expo-cli React Native 生成器的规范输入，你能够通过在终端中键入 expo init 来运行该输入。

App.js？

因为 Expo 的构建链的工作模式，我的项目目录根目录中的 App.js 文件通常是应用程序的入口点。在本书的其余部分中，为了标准咱们的挪动我的项目的代码，将 App.js 文件只是作为一个 /src/Main.js 参考文件。

当初，咱们曾经在本地计算机上安装了代码并装置了依赖项，让咱们运行该应用程序。要启动该应用程序，在终端应用程序中，键入以下内容：

$ npm start

这将在浏览器的本地端口上关上 Expo 的“Metro Bundler”Web应用程序。在这里，你能够通过单击“运行于…”链接之一来启动本地设施模拟器。你还能够通过扫描在 Expo Client 上的二维码启动应用程序（图21-1 ）。

图 21-1。启动咱们的应用程序后，Expo 的Metro Bundler

装置设施模拟器

要运行 iOS 设施模拟器，你将须要下载并装置 Xcode （仅限 macOS）。对于Android，请下载 Android Studio，而后依照 Expo 的指南设置设施模拟器。（请参见图 21-2 进行比拟。）然而，如果你刚刚开始挪动利用程序开发，倡议你从本人的手机开始。

图 21-2。咱们的应用程序在iOS 和Android设施模拟器上并排运行

如果你曾经从计算机的终端应用程序以及挪动设施上的 Expo Client 应用程序中登录到 Expo，则只需关上Expo Client 应用程序并单击 Projects 选项卡即可关上该应用程序（图21-3）。

图21-3。借助Expo Client，咱们能够在手机上预览咱们的应用程序

借助将代码克隆到本地计算机并可能应用 Expo Client 预览应用程序的性能，你就能够开发挪动应用程序。

论断

本章介绍了 React Native 和Expo。咱们克隆了示例我的项目代码，在本地运行，并在手机或模拟器上进行了预览。React Native使 Web 和JavaScript开发人员可能应用他们相熟的技能和工具来构建性能全面的本机挪动应用程序。Expo简化了工具链，并升高了本机挪动开发的入门门槛。应用这两个工具，老手能够轻松地开始进行挪动开发，并且精通网络的团队能够疾速介绍挪动利用程序开发技能。在下一章中，咱们将认真钻研 React Native 的性能，并为咱们的应用程序介绍路由和款式。

如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，麻烦您点赞珍藏或者分享一下，心愿能够帮到更多人。