翻译|《JavaScript Everywhere》第21章使用ReactNative创建移动应用前端开发工程师。翻译一本英文技术书籍。为了提高大家的阅读体验，对句子的结构和内容进行了微调。如果大家发现本文有什么不妥之处，或者有什么意见和建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎交流，互相学习。(σ???)σ..:*☆还不错第21章用ReactNative创建移动应用程序80年代后期的一天，我和父母逛街时，发现了一台小型便携式电视，是一块电池带有天线、小型扬声器和小型黑白屏幕的供电盒。星期六早上在院子里，我被我看到的卡通片震撼了。尽管我可能永远不会拥有这些电视中的任何一台，但只要知道存在这样的设备就会让我觉得自己生活在科幻未来世界中。没想到成年后我会在口袋里装一个设备，它不仅可以让我看《宇宙主宰》，还可以获取无限信息、听音乐、玩游戏、做笔记、拍照。叫车、买杂货、查看天气并完成无数其他任务。2007年，史蒂夫·乔布斯(SteveJobs)推出iPhone时说：“每隔一段时间，就会有一款革命性的产品改变一切。当然，智能手机在2007年之前就已经存在，但直到iPhone（然后是Android）的兴起，它们才真正变得智能。用户要求的质量。以及寄予厚望的东西。当今的应用程序具有高标准的功能、交互和设计。更糟糕的是，现代移动应用程序开发分散在AppleiOS和Android平台上，每个平台都使用不同的编程语言和工具链。您可能已经猜到了（标题就在那里），但JavaScript使我们的开发人员能够跨平台编写-平台移动应用程序。在本章中，我将介绍跨平台库：ReactNative和Expo工具链。我们还将克隆示例项目代码，将在接下来的几章中进行构建。我们正在构建什么在接下来的几章中，我们将构建Notedly社交笔记应用程序的移动客户端版本。目标是使用JavaScript和网络技术开发用户可以安装在其移动设备上的应用程序。我们将实现部分功能以避免在Web应用程序章节中出现过多重复。具体来说，我们的应用程序将：在iOS和Android操作系统上可用从我们的GraphQLAPI加载注释摘要和个人用户注释使用CSS和样式化组件进行样式化执行这些功能的标准和动态路由将全面概述开发的核心概念使用ReactNative的移动应用程序。在我们开始之前，让我们仔细看看我们将使用的技术。我们将如何构建它ReactNative是我们将用于开发应用程序的核心技术。ReactNative允许我们在JavaScript中使用React编写应用程序，并为原生移动平台呈现它们。对于用户而言，这意味着ReactNative应用程序与使用平台编程语言编写的应用程序之间没有明显区别。这是ReactNative相对于其他流行的基于Web技术的移动框架的主要优势，后者通常将Web视图包装在应用程序外壳中。Facebook、Instagram、Bloomberg、Tesla、Skype、Walmart、Pinterest和许多其他公司都使用ReactNative来开发应用程序。我们应用程序开发工作流程的第二个关键部分是Expo，这是一套工具和服务，可通过设备上预览、应用程序构建和扩展核心ReactNative库等非常有用的功能简化ReactNative开发。在开始我们的开发之前，我建议您执行以下操作：访问expo.io并创建一个Expo帐户。通过在终端应用程序中键入npminstallexpo-cli--global来安装Expo命令行工具。通过在终端应用程序中键入expologin，在本地登录到您的Expo帐户。为您的移动设备安装ExpoClient应用程序。可以在expo.io/tools找到ExpoClientiOS和Android应用程序的链接。在ExpoClient应用程序中登录您的帐户。最后，我们将再次使用ApolloClient与GraphQLAPI中的数据进行交互。ApolloClient包括一组用于使用GraphQL的开源工具。入门在开始开发之前，您需要将项目启动文件复制到您的计算机。该项目的源代码包含我们开发应用程序所需的所有脚本和对第三方库的引用。要将代码克隆到本地计算机，请打开终端，导航到保存项目的目录，然后gitclone项目存储库。如果您浏览过API、Web和桌面章节，您可能已经创建了一个notedly目录来组织您的项目代码：$cdProjects$#如果您还没有notedly，请键入`mkdirnotedly`命令目录$cdnotedly$gitclonegit@github.com:javascripteverywhere/mobile.git$cdmobile$npminstall安装第三方依赖项第3方依赖项再次运行npminstall。代码结构如下：/src这是你用本书开发的目录。/solutions该目录包含每一章的解决方案。如果您遇到困难，这些供您参考。/final这个目录包含最终的工作项目。其余文件和项目设置适应expo-cliReactNative生成??器的标准输出，您可以通过在终端中键入expoinit来运行它。应用程序.js？由于Expo构建链的工作方式，项目目录根目录中的App.js文件通常是应用程序的入口点。在本书的其余部分，App.js文件只是用作对/src/Main.js的引用，以标准化我们移动项目的代码。现在我们已经在本地机器上安装了代码并安装了依赖项，让我们运行应用程序。要启动应用程序，请在终端应用程序中键入以下内容：$npmstart这将在浏览器的本地端口上打开Expo的“MetroBundler”Web应用程序。从这里，您可以通过单击其中一个“运行于...”链接来启动本地设备模拟器。您还可以通过扫描ExpoClient上的二维码来启动应用程序（图21-1）。图21-1。启动我们的应用程序后，Expo的MetroBundler会安装设备模拟器。要运行iOS设备模拟器，您需要下载并安装Xcode（仅限macOS）。对于Android，下载AndroidStudio，然后按照Expo的指南设置设备模拟器。（参见图21-2进行比较。）但是，如果您刚刚开始移动应用程序开发，我建议您从自己的手机开始。图21-2。我们的应用程序在iOS和Android设备模拟器上并行运行如果您已经从计算机上的终端应用程序以及移动设备上的ExpoClient应用程序登录Expo，只需打开ExpoClient应用程序并单击“项目”选项卡打开应用程序（图21-3）。图21-3。在ExpoClient的帮助下，我们可以在手机上预览我们的应用程序通过将代码克隆到本地计算机并能够使用ExpoClient预览应用程序的能力，您可以开发移动应用程序。结束语本章介绍了ReactNative和Expo。我们克隆了示例项目代码，在本地运行，并在手机或模拟器上进行预览。ReactNative使Web和JavaScript开发人员能够使用他们熟悉的技能和工具来构建功能齐全的原生移动应用程序。Expo简化了工具链并降低了原生移动开发的进入门槛。有了这两个工具，新手可以轻松上手移动开发，精通网络的团队也可以快速入门移动应用开发技能。在下一章中，我们将更深入地了解ReactNative的功能，并为我们的应用程序介绍路由和样式。如果有什么不明白的地方，请指正。如果觉得还可以，请点赞、收藏或分享，希望能帮助到更多的人。
