2019年React Native入门：构建第一个应用程序

了解如何使用重要的基本概念构建您的第一个React Native应用程序以及从这里出发的去处！

我们生活在各种各样的移动设备中，这些设备主要由iOS和Android两个平台主导。 这是一场两匹马的比赛，我相信我们都可以对此表示同意。 但是，构建移动应用程序并非易事。

对于iOS，您可以使用Objective-C或Swift编写代码；对于Android，则可以使用Java。 除了用于创建可以在两个平台中的每个平台上运行的移动设备的不同编程语言之外，这两个移动平台的工具链也完全不同。

许多现代开发人员使用一套特定的技术来构建Web应用程序：HTML，CSS和JavaScript。 有几种不同的框架属于通常称为混合应用程序的类别。 您几乎可以使用一组源代码来为iOS和Android平台开发应用程序。

近年来，混合框架已经从Web视图演变为使用本机API。 开发移动应用程序的这种跨平台方法具有其优点和缺点。 诸如耗时少，成本效益高等优点包括性能问题。

跨平台开发的一个重要选择是React Native。 由Facebook以及特斯拉，沃尔玛，Uber Eats，Instagram，Discord，Wix等其他公司开发和使用。 React Native基于Facebook的Web库ReactJS。

你要学什么？

在本教程中，您将学习以下内容：

• 什么是React Native？
• 搭建开发环境
• 使用React Native CLI
• 运行一个React Native App
• 什么是App.js？
• 热装
• AppRegistry
• 构建您的第一个React Native App
• 了解不同的UI组件
• View组件
• StyleSheet对象
• Text部分
• 使用FlatList创建列表
• React Native的学习途径

什么是React Native？

简而言之，React Native允许您构建外观，感觉和性能更像本机应用程序的移动应用程序。 它使用与常规iOS和Android应用程序相同的基本UI构建块。 您只需使用JavaScript和React将这些构建块放在一起。 对开发人员而言，好事是他们可以使用与构建Web应用程序几乎相同的概念。

如果您熟悉Reactjs或来自前端开发背景，React将使用虚拟DOM，它充当可用的实际DOM的影子。 当元素发生更改时，该更改将通过虚拟DOM使用与每个元素相对应的节点反映在真实DOM上。

但是，在React Native中，没有DOM，而没有iOS和Android等平台提供的Native Components。 这里没有网络视图。 React Native有一个实例 JavaScript核心 在应用程序启动时执行JS代码。 React Native使用RCTBridgeModule在本机代码和JavaScript代码之间建立连接。

简而言之，React Native将React带到了移动应用程序开发中。 它的目标不是一次性编写代码并在任何平台上运行。 这里的主要目标是学习一次，随处写作。 一个重要的区别。 React Native还是一个相对较新的版本，在撰写本文时，它的版本为0.57 。

先决条件：设置开发环境

要深入了解React Native的生态系统，我们需要先安装一些东西才能上手。 让我们经历其中之一。

Nodejs和Watchman

React Native使用JavaScript运行时Node.js来构建JavaScript代码。 如果您尚未安装Node.js，那么该是从其官方网站上获取它的时候了 在这里 。 我建议安装LTS（ 长期支持 ） 10.xx版本，这也是我个人使用的版本。

Watchman是Facebook开发的一种用于监视文件更改的工具。 强烈建议您安装它以获得更好的性能。 对于Mac用户，您将需要使用homebrew macOS软件包来安装watchman ： brew install watchman 。

对于Windows用户，没有watchman因此您可以跳过此步骤，但是您需要拥有Nodejs和python2因为React Native的最新版本需要它。

最后，每个人（无论使用何种操作系统）都需要安装Java SE开发工具包（JDK），该工具包可在此处找到。 确保您安装的版本至少等于或大于>= 8 。

本机SDK

对于macOS开发人员，您可以安装Xcode，它免费开发iOS应用程序。

如果您想为Android开发，那么如果您不熟悉Android，则设置其开发环境可能会有些乏味。 您将安装Android Studio ，这是一个完全免费的工具，可以用其母语开发Android应用程序。 您将为此过程安装实用程序列表，然后首次设置路径变量，因此，我建议您在此处进行确切的链接 这是Facebook提供的官方安装说明。

反应本机CLI

一旦完成了开发环境设置过程和必要的工具，就可以立即深呼吸。 我们将开始构建我们的第一个REACT NATIVE APP。 为了开始，我们需要另一个工具。 现在，使用npm （ 使用Node.js安装的软件包管理器）来安装react-native-cli 。 打开您的终端并运行以下命令。

此CLI工具用于构建一个入门项目，其中包含构建和运行React Native应用所需的一切。 npm将此CLI工具安装为全局模块 。

要验证安装过程是否成功，您可以运行以下命令，它将输出您当前版本的CLI工具。

运行React Native应用

首先，我们需要使用刚刚安装的CLI工具创建项目目录。 打开您的终端并运行以下命令。

您可以随意命名。 完成该过程后，遍历项目目录。 如下所示的一组文件将欢迎您。

现在，让我们从上面简单地看一下对于我们理解必不可少的文件或目录：

• App.js是任何React Native应用程序中的第一个文件，是应用程序开发过程的切入点。 无论您在此文件中写入什么内容，它都将显示在移动设备上。
• node_modules /是一个文件夹，其中包含用于开发和运行此应用程序的所有依赖项（ 或程序包 ）。
• index.js是在设备或模拟器上触发应用程序的入口点
• ios是一个文件夹，其中包含一个Xcode项目以及为iOS设备引导该应用程序所需的代码
• android是包含android相关代码的文件夹，用于为Android设备引导该应用
• package.json ，其中列出了所有安装的依赖项

到目前为止，您可以忽略其他文件。

运行应用程序

react-native-cli工具附带一些默认的代码片段。 要查看它的实际效果，您将必须使用终端来运行该应用程序。 为此，我将使用iOS模拟器和Android模拟器。 Windows开发人员可以忽略iOS部分。

请注意，我们尚未对应用程序的源代码进行任何更改。 要运行该应用程序，我们需要首先触发以下命令。

这将启动Metro bundler，以监视项目中.js文件中的任何文件更改。 在为iOS或Android构建项目时，请确保此命令在单独的终端窗口或选项卡中运行。

在iOS上运行

要使用iOS模拟器上的当前内容运行该应用程序，您可以在第二个终端窗口中运行以下命令。

此命令将构建您的应用程序，并在iOS模拟器上启动它。 首次为任何React Native应用构建必要的iOS文件时，此过程会花费大量时间。 完成该过程后，还将为您打开一个模拟器设备，如下所示。

此iOS模拟器是您当前Xcode版本的默认模拟器。 但是，您可以通过添加标志来运行任何sim设备。 通过运行以下命令： xcrun simctl list devices您可以检查哪些设备可用作模拟器。

上图中每个列出的设备的最后一次“ Booted或“ Shutdown告诉您当前正在运行的设备。 要为另一台设备构建并运行，可以运行以下命令。

其中"iPhone 8 Plus"是您可以通过我提到的最后一个命令查找的值。

在Android上运行

您将需要一个Android设备来运行您的React Native Android应用。 它可以是物理Android设备，也可以是更常见的设备，您可以使用Android虚拟设备，该虚拟设备可以在计算机上模拟Android设备。

如果您希望在真实设备上运行它，则可以按照此处的完整说明进行操作。 要在Android模拟器上运行，请打开Android Studio，然后选择“打开现有项目/文件夹”选项。 一旦打开项目并为其建立索引，您将看到一个图标，其外观与右下角的图像完全相同。

这是启用Android虚拟设备（ AVD ）的选项。 如果您刚刚安装了Android Studio，则可能需要创建一个新的AVD。 虚拟设备运行后，您可以从终端窗口运行命令react-native run-android来打开应用程序。

如何修改App.js？

要查看两个设备上运行的应用程序，让我们使用以下代码修改App.js

以下修改的结果可以，如果你按可以看到Cmd + R iOS和双R在Android上。

启用热重装

每当您在React Native应用程序代码中保存任何内容时，React本机应用程序中的热重载功能都有助于显示UI中发生的任何更新。 在启用该功能，你不必按Cmd + R iOS和双R Android上再次看到你刚才提出的UI的变化。

要启用此功能，只需根据您的操作系统按Ctrl + M/Cmd + M ，然后从出现的弹出菜单中选择“ 启用热重载 ”，如上所示。

什么是AppRegistry？

呈现此App组件的文件是根目录中的index.js ，该文件具有以下代码。

AppRegistry是运行React Native应用程序的入口点。 应用程序组件或应用程序中的任何其他根组件应通过使用AppRegistry.registerComponent注册，以便本机系统可以加载应用程序包并通过启动AppRegistry.runApplication运行该应用程序。

您可以在此处详细了解有关AppRegistry更多信息。

宝贝步骤：First React Native App

在本部分中，您将构建第一个React Native应用程序。 首先，我们已经使用cli工具生成了一个React Native项目。 现在您唯一需要了解的是什么是组件？

组件是您在React Native应用程序的屏幕上看到的视觉元素。 React Native核心提供了几个组件供您使用。 为了更好地理解这一点，我们可以将这些组件分为六大类：

• 基本或核心组件，例如View ， Text ， Image ， ScrollView ， TextInput ， StyleSheet
• 列出组件，例如FlatList和SectionList
• 用户界面或表单控制组件，例如Picker ， Slider ， Button ， Switch
• iOS特定组件，例如ActionSheetIOS ， SegmentedControlIOS ， AlertIOS ， PushNotificationsIOS
• Android特定组件，例如DatePickerAndroid ， TimePickerAndroid ， ViewPagerAndroid ， ToastAndroid ， PermissionsAndroid
• 其他/其他组件，例如Alert ， Animated ， CameraRoll ， Dimensions ， Clipboard ， StatusBar ， Linking ， Keyboard ， ActivityIndicator ， WebView和Modal

详细介绍它们中的每一个都不在本文的讨论范围之内，并且将是一开始学习事物的乏味方法。 相反，我们将使用基于项目的方法来学习您的学习方法。 React Native核心提供了更多组件和API，您可以查看官方文档，并会不时需要它们。

我们在建什么？

您将构建一个小型应用程序，以使自己熟悉基本组件。 下图所示的应用程序将是最终结果。

上面仅是直接来自组件状态的文本列表。 在项目的根目录中创建一个新的src/components目录，并在components/内部创建一个名为EmojiDict.js的新文件， EmojiDict.js包含以下代码片段。

因此，我们必须修改App.js文件才能显示该组件的结果。

现在，如果您查看模拟器屏幕，您将看到以下结果。

到底是怎么回事？ 首先看一下EmojiDict文件。 我们正在从React Native导入基本组件。 我们首先声明一个View组件，它是React Native文件中的基本构建块。 它映射到基本的本机iOS（ UIView ）和Android（ View ）组件，因此命名。 您可以认为此组件只是HTML中所有其他元素都放在其中的div元素。 因此， View组件可以包含嵌套组件。

View组件放置了一个容器元素，该元素支持通过CSS使用flexbox和其他样式的布局样式。 我们正在通过StyleSheet向View提供StyleSheet 。 因此，可以说View组件主要用于子元素的样式和布局。

React Native中的StyleSheet提供了一个API来在组件文件中创建样式。 它像上面一样使用JavaScript对象，并从中返回一个新的Stylesheet对象。 像Web开发一样，React Native中没有类或ID 。 若要创建一个新的样式对象，请使用StyleSheet.create()方法。

我们通过创建对象来定义样式的方式是首选方式。 它不仅可以帮助您组织样式并使它们分开，而且以这种方式定义的这些样式也仅通过本机渲染桥发送一次。

“ Text组件在很多方面都类似于“ View组件，不同之处在于它专门用于显示文本。 另外，像View组件一样，它支持样式。 现在，我们正在使用flexbox在View组件内部设置样式并居中。 Flexbox是一种算法，用于为其子组件指定组件的布局以遵循相同的模式。 假设我们如下修改：

刷新模拟器时，您将获得以下结果。

创建表情符号列表的方式并不是一种务实的方法，无论是来自第三方API还是通过组件状态进行管理，并像上面一样将其呈现为列表，都可以处理数据。 让我们将简单的视图转换为FlatList 。

FlatList是跨平台的，默认情况下以垂直方式显示数据项列表。 它需要两个道具： data和renderItem 。 data是列表信息的来源。 renderItem从源中获取一项，并返回要格式化的格式化组件。 可以应用到FlatList组件的Stylesheet由prop contentContainerStyle接受，该内容接受Stylesheet对象的值。 上面是最简单的Flatlist版本。 此外，React Native中的FlatList支持拉动刷新交互和水平显示模式。

这样就完成了我们的第一个React Native App。 我敢肯定，您可能学到了一两件事。 它只是呈现项目列表的基本组件。

有关学习React Native的更多信息

由于缺少最新资源或您在React Native上找不到的具体资源很多，我敦促您坚持通过过程学习，并尽可能多地获得该领域的经验。 当我从Web开发背景开始学习React Native时，我确实很挣扎。

我认为您可以采取以下措施来推动React Native开发。

从基础开始

本文仅简要概述了React Native应用程序开发过程中的内容以及工作原理。 我经常遇到（尤其是通过＃100DaysOfCode 广告系列）那些努力学习新框架的开发人员，而这些新框架几乎没有特定编程语言的背景知识。 我的建议是在您进行庞大的项目之前，从基础开始。 学习概念，将其作为曲线的每个特定组成部分，确保尽可能多地应用它们并构建一些小东西。

例如，今天在本文中了解了有关使用FlatList组件的信息。 尝试使用自己的数据集创建列表，或在互联网上找到模拟/伪造数据集，然后尝试使用该数据集构建一个小型应用程序。 永远记住创建第一个Hello World程序时的感受。 你还记得那种成就感吗？

采取一些小步骤，首先构建一些小东西，然后再深入研究状态管理库（例如Redux和Mobx）的复杂性，或者使用第三方API，TypeScript或Flow等持久化数据。 这些只是工具，您无需在第一天就了解它们（ 但我并不是说您不必永远都不了解它们。这里的关键词是它们是TOOLS ）。 如果您不熟悉JavaScript，请确保对ES6的基本功能（如类，箭头函数等）不陌生。然后，您必须通读基本的ReactJS概念，如道具，状态和无状态组件。

总而言之，请看一下：

• ES6功能
• ReactJS组件API
• 为React Native设置开发环境
• 弹性盒

前进的道路

一旦您掌握了基本概念并进行了一些尝试以获得一些实践经验，就可以进一步提高了。 开始构建更大的应用程序，这些应用程序可以像实际应用程序一样工作或运行，并与实时数据进行交互。 这是您可以学到的东西清单。

• 使用AsyncStorage离线数据存储
• 使用第三方API
• 地图
• 开机画面
• 导航
• Redux（用于状态管理）
• Redux**和坚持
• 测试和TDD
• 推送通知
• UI动画
• 构建和发布您的应用
• 连续交付或CI

请注意，这些只是使您入门的广泛主题。 您还将在此过程中学到很多其他东西。 不要为此感到不知所措。

个人挑战：您想要什么？

也许您是成为React Native开发人员的专业人士，并且在使用该技术框架的组织中工作，或者您想为客户/客户构建应用程序。 用这种方式来设定自己的个人挑战是一种学习的好方法。 对自己做出承诺并继续努力。 在您的手机或商店上查找要克隆的应用程序，或者将其他功能添加为功能，或者了解用户界面。

不要因您犯的错误或收到的错误而感到不知所措。 整天在互联网上感到沮丧和抱怨/抱怨是很容易的，但是要知道，这不能解决您的问题或使您成为更好的开发人员。 所有这些都是您旅程的一部分。 不断提醒自己。

结论

如果您是React Native开发的入门者，请让我们一起做。 我在Twitter上可用（ 您可以在其中DM我 ）me

我经常写Web技术，但是我主要关心的是在React Native上提供内容。 您可以在Medium上关注我，也可以订阅下面的每周新闻 ， 直接在收件箱中接收我的所有教程 ????

本教程的完整代码在此处????。

From: https://hackernoon.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc0617e2