翻译 |《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
库。在开始咱们的开发之前,倡议你执行以下操作:
- 拜访
expo.io
并创立一个Expo
帐户。 - 通过在终端应用程序中键入
npm install expo-cli --global
来装置Expo
命令行工具。 - 通过在终端应用程序中键入
expo login
本地登录你的Expo
帐户。 - 为你的挪动设施装置
Expo Client
应用程序。能够在expo.io/tools
中找到指向Expo Client iOS
和Android
应用程序的链接。 - 在
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
的性能,并为咱们的应用程序介绍路由和款式。
如果有了解不到位的中央,欢送大家纠错。如果感觉还能够,麻烦您点赞珍藏或者分享一下,心愿能够帮到更多人。