随着智能手机的不断普及，开发人员正在寻找构建移动应用程序的解决方案。对于有网络背景的开发者来说，诸如Cordova和Ionic、React Native、NativeScript和Flutter等框架使我们能够用我们已经熟悉的语言创建移动应用。HTML、XML、CSS和JavaScript。
在本指南中，我们将对React Native进行仔细研究。你会学到开始使用它的绝对基础知识。具体来说，我们将涵盖以下内容。
- 什么是React Native
- Expo是什么
- 如何使用Expo建立一个React Native开发环境
- 如何用React Native创建一个应用程序
前提条件
本教程假定你有网页开发的背景。你能够自信地学习本教程的最低要求是了解HTML、CSS和JavaScript。你还应该知道如何在你的操作系统上安装软件和使用命令行。我们还将使用一些ES6语法，所以如果你也知道基本的ES6语法会有帮助。对React的了解是有帮助的，但不是必须的。
什么是React Native？
React Native是一个框架，用于构建可以在Android和iOS上运行的应用程序。它允许你使用JavaScript和React创建真正的本地应用程序。这不同于像Cordova这样的框架，在那里你使用HTML来构建UI，然后只在设备的集成移动浏览器（WebView）中显示。React Native有内置的组件，这些组件被编译成本地UI组件，而你的JavaScript代码是通过虚拟机执行的。这使得React Native比Cordova更具有性能。
React Native的另一个优势是它能够访问本地设备的功能。有很多插件，你可以用来访问本地设备的功能，如摄像头和各种设备传感器。如果你需要一个尚未实现的特定平台功能，你也可以建立自己的原生模块--尽管这需要你对你想支持的原生平台有相当的了解（Android的Java或Kotlin，以及iOS的Objective C或Swift）。
如果你来到这里，并且你是React的新手，你可能想知道它是什么。React是一个用于网络的JavaScript库，用于构建用户界面。如果你熟悉MVC，它基本上就是MVC中的View。React的主要目的是让开发者建立可重复使用的UI组件。这些组件的例子包括按钮、滑块和卡片。React Native采用了构建可重用UI组件的想法，并将其带入移动应用开发。
什么是Expo？
在来这里之前，你可能已经听说过Expo。它甚至在官方的React Native文档中被提及，所以你可能想知道它是什么。
简单来说，Expo允许你构建React Native应用，而不需要在最初的时候为建立开发环境而头疼。它只要求你在你的机器上安装Node，在你的设备或模拟器上安装Expo客户端应用程序。
但这只是Expo最初的销售方式。实际上，它远不止于此。Expo实际上是一个平台，让你可以使用工具、库和服务，用React Native更快地构建Android和iOS应用程序。Expo有一个SDK，其中包括你在移动应用开发平台中可以要求的大部分API。
这些只是你在使用Expo构建React Native应用时可以使用的少数API。当然，如果你使用标准的React Native设置来开发你的应用程序，这些API也可以通过本地模块来使用。
纯粹的React Native还是Expo？
真正的问题是该选哪一个--普通React Native还是Expo？其实没有正确或错误的答案。这完全取决于环境和你的需求。但我想可以假设，你读这个教程是因为你想快速开始使用React Native。因此，我将继续推荐你从Expo开始。它快速、简单，而且容易设置。你可以在短短几个小时内就开始修补React Native的代码，并感受到它所提供的功能。
但当你开始掌握不同的概念，以及对不同原生功能的需求出现时，你可能会发现Expo有点局限性。是的，它有很多原生功能可用，但并不是所有标准React Native项目可用的原生模块都被支持。
注意：像unimodules这样的项目已经开始缩小标准React Native项目和Expo项目之间的差距，因为它允许开发者创建同时适用于React Native和ExpoKit的本地模块。
设置React Native开发环境
要快速开始使用React Native，推荐的方法是设置Expo。
设置Expo的唯一前提是，你需要在你的机器上安装Node.js。要做到这一点，你可以去Node的官方下载页面，为你的系统抓取相关的二进制文件，或者你可以使用一个版本管理器，它允许你安装多个版本的Node并在它们之间随意切换。
一旦你安装了Node.js，安装Expo CLI。这是用来创建、服务、打包和发布项目的。
npm install -g expo-cli
接下来，安装Yarn，这是Expo的首选软件包管理器。
npm install -g yarn
这就是它的全部内容了!下一步是下载安卓或iOS的世博客户端应用程序。请注意，这是你在开发过程中可以运行世博会应用程序的唯一方法。当你准备发货时，你可以按照本指南为iOS和Android创建独立的二进制文件，并提交给苹果应用商店和谷歌Play商店。
我们要建立的东西
现在你的开发环境已经设置好了，我们可以看看我们要创建的应用程序--一个口袋妖怪搜索应用程序。它将允许用户在输入框中输入神奇宝贝的名字，然后从外部API中获取神奇宝贝的详细信息，并将其显示给用户。
这是完成后的东西的样子。
和以往一样，你可以在我们的GitHub repo中找到这个的源代码。
引导应用程序
在你的终端，执行以下命令，用Expo创建一个新的React Native项目。
expo init RNPokeSearch
在管理的工作流程下，选择空白。默认情况下，这将使用Yarn安装依赖项。
你可能会问这个托管工作流和空白工作流是什么。这是Expo支持的两种类型的工作流。在管理型工作流中，你只需要处理JavaScript，Expo为你管理一切。而在裸工作流程中，你可以完全控制本地代码。它给了你和React Native CLI一样的自由，但又有Expo的库和服务的额外好处。如果你想了解更多关于Expo的工作流程，你可以访问这个管理与裸露介绍页面。
就像在网络环境中一样，你可以安装库来轻松实现React Native中的不同功能。一旦项目被创建，我们需要安装几个依赖项：pokemon和axios。前者用于验证在搜索框中输入的文本是否是真正的神奇宝贝的名字，而axios用于向我们使用的API，即PokeAPI发出HTTP请求。
yarn add pokemon axios
React Native项目目录结构
在我们开始编码之前，让我们先看看用Expo创建的React Native项目的目录结构。
下面是你需要记住的最重要的文件和文件夹的分类。
App.js: 主项目文件。这是你将开始开发你的应用程序的地方。你对这个文件所做的任何改动都会反映在屏幕上。src主项目文件：作为主文件夹，它存储了与应用程序本身有关的所有源代码。注意，Expo CLI创建的默认项目中不包括这个文件夹。这个文件夹的名字可以是任何东西。有些人也会使用app。assets文件夹：这是存放图标和闪屏等应用程序资产的地方。package.json文件夹：为这个项目安装的库的名称和版本被添加到这里。node_modules：你所安装的库被储存在这里。注意，在你之前安装这两个库之前，这里已经包含了很多文件夹。这是因为React Native也有自己的依赖关系。对于你安装的所有其他库也是如此。
暂时不要在意其他的文件夹和文件，因为我们在刚开始的时候不会需要它们。
运行应用程序
在这一点上，你现在可以通过执行下面的命令来运行该应用程序。确保你已经为你的手机安装了相应的Expo客户端（安卓或iOS），并且在这样做之前，它与你的电脑连接在同一个网络上。如果你没有可以测试的安卓或iOS设备，你可以使用安卓工作室模拟器或iOS模拟器，这样你就可以在你的机器上运行该应用程序。
yarn start
一旦运行，它将显示一个QR码。
打开你的Expo客户端应用程序，并在项目标签中点击扫描二维码。这将在你的安卓或iOS设备上打开该应用程序。如果你有一个模拟器在运行，你可以按i在iOS模拟器上运行，或者按a在Android模拟器上运行。
如果你在真实设备上测试，摇晃它，这样开发者菜单就会显示出来。
确保快速刷新被启用。这允许你自动重新加载你在组件上所做的修改。
继续阅读：在SitePoint上开始使用React Native。
