阅读完本教程后，你将能：
- 回答“什么是 React Native？”
- 熟悉 Expo 和 Expo CLI
- 使用 Expo 创建 React Native APP
- 对开发 Native 组件中的 React 有基本了解
- 在 iOS 模拟器上远程运行你的APP
- 使用 Google Chrome 调试APP
- 将APP发布到 Expo Go
- 加油！世界属于你的！
本教程中，此APP是使用以下方法创建的：
- 在 Big Sur v11.2.3 上运行 Mac OS
- 节点 v14.15.1
- 视觉工作室代码
- 谷歌浏览器
作为参考，你可以点击https://github.com/Will-Watson/ReactNativeDemo查看我的 Github 存储库
准备工作
掌握 Javascript 和 React相关知识很重要。虽然你不一定要成为 React 专家，但对组件、道具、状态和 JSX 有深入的了解仍是十分必要的。
什么是 React Native？
React Native是使用 Javascript在iOS和Android设备上创建移动应用程序的框架。React Native 是一个特别有用的框架，因为你不用了解为 iOS 或 Android 构建应用程序的具体细节，就能使用纯 Javascript 构建应用程序。这意味着你可以构建一个可以在任一平台上进行共享的APP。这样做的好处是无穷无尽的，但对于公司或开发人员来说，他们不必为每个平台构建两个独立APP，同时，也不必维护两个代码库或雇用两个专门研究每个平台独有语言的工程师团队了。这一切都因为一个包装精美的 Javascript 包的出现，为Javascript打call。
Expo入门
我先表明在使用 React Native 开发APP时，Expo 并不是必需的。但作为新手小白，Expo 是很有帮助的，因为它隐藏了 React Native 中很多复杂性，它可以让你直接编码和学习新组件的功能。除此之外的另一种选择是普通的 React Native。
Expo CLI 是一组可以加快流程的工具，不要让这个小细节吓倒你，你仍然可以使用 Expo 开发带感且功能齐全的本机APP。
设置开发环境
你首先要做的是在全球范围内安装 Expo CLI，所以让我们打开那个终端。
现在，你将从根目录运行以下命令。
在我们等待安装期间，你可以打开应用商店并在你的iPhone上下载 Expo Go。（Expo Go 也可在 Android 设备上使用，但在本教程中，我们主要关注 iOS）。
使用此应用程序，你可以在设备上运行和测试该APP，也可以向你朋友炫耀一番。
现在我们继续设置项目。
使用命令行创建一个文件夹。你可以随意命名此文件夹，然后为所开发的APP创建名称。
在更改目录并创建完新文件夹后，你要运行以下命令：
我已将我的APP命名为 ReactNativeDemo，你可以随意命名。然后你将得到以下屏幕。
简单起见，我们将使用空白画布，或者你可以直接使用当前看到的突兀画布，按回车键。
然后你将被带到此屏幕，因为有很多依赖项，因此可能会需要一点时间。完成后你会看到这个：
现在你需要进入这个文件夹并在 VSCode 中打开它。进入后，你会看到该文件夹已经为你下载了很多文件。
你现在唯一需要关注的文件夹和文件是 assets 文件夹和 App.js 文件。assets 文件夹包含你计划用在APP中的所有图像、声音和其他文件。这可能会让你想起在大多数应用程序中看到的转到“公共”文件夹。App.js 只是一个具有一些显着差异的准系统组件。
esLint 在第 7 行干扰着我
React Native 的内置组件
你应该立刻注意到有一些组件是从“react-native”导入的。这些组件乍一看可能有点奇怪，但时机一到就会变得有意义。我们需花点时间查看一下这段代码。有点眼熟对不对？那是因为 React Native 组件的功能与常规 React 组件非常相似，但差异还是有的。主要是在 return 语句中，你会习惯在其中看到一些 JSX 或 HTML 外观标签。
View 组件就像一个
标签。此处的主要区别在于，你将无法再通过随意键入的方式在应用程序中呈现文本，文本组件是必须要有的。
你还会在 View 组件中看到一个 style 属性。这就是 React Native 处理样式的方式。如果看到这个警报你需要进行深呼吸。作为一名早期开发人员，我讨厌 CSS 和样式，并认为我无法掌控这一点。但就像生活中的所有事情一样，实践出真知。使用 React Native 创建项目后，我觉得自己就像是他们风格管理的专家。
在组件下面有一个称为样式的常量声明，分配给它的是调用 create 方法的 StyleSheet 组件。一开始可能看起来很吓夸张，但只要细阅读就没问题。样式被分配给正在创建的样式表，如果你熟悉 CSS（我肯定你很熟悉），你会看到该代码块内部只是看起来很普通的 CSS，但有一些关键的区别，即你只有一个对象，而不是繁琐的特定 ID 或 ClassName，在这个对象中，你有 CSS 属性。
这里的属性也有点不同，你会特别注意到第 17-19 行。这些属性不是用连字符分隔的，而是驼峰式的。
现在，如果你再次查看 View 组件的内部，你将看到样式属性的值为 style.container。这意味着 View 组件现在拥有容器对象的样式属性。
专业提示： 为你的样式创建一个单独的文件并导出它们。通过这种方式，你可以将其导入每个组件并在必要时应用相同的样式，而无需在每个组件文件中重写代码。这是保持DRY的好方法。
React Native 有大量可以导入的内置组件，查看他们的文档以获取有关其所有功能的完整指南。
核心组件和 APIs · React Native
React Native 提供了许多内置的核心组件，供你在应用程序中使用
现在我们对一些 React Native 组件有了基本的了解，我们可以继续讨论有趣的部分。
在 iOS 模拟器上运行APP
如果你还没有从应用商店下载 Xcode，那就快去下载。这个文件很大，下载需要一些时间。
下载完成后，我们将返回到 VSCode 并打开终端。Mac 上的快捷方式是 control+`（反勾）。
在这个终端中，我们将运行每个人最喜欢的命令 npm run start。
这将自动打开我们的浏览器并将我们带到具有 Metro Bundler 的本地主机地址。
Metro Bundler 是 React Native 的 Javascript 打包器。它负责将我们所有的代码打包到一个文件中，类似于 webpack 之类的东西。它也充当我们的控制台，你可以在这里找到所有错误消息和 console.logs，因此它可以成为调试过程中的关键因素。Metro Bundler 也是你可以在 iOS 模拟器上快速打开APP的地方。你所要做的就是单击“在 iOS 模拟器上运行”按钮。让我们走起！
Metro Bundler Logs
iPhone 11 模拟器
Bang! 就像这样，你现在正在模拟你的应用程序。在这里，我使用的是 iPhone 11 模拟器，但你可以通过转到“文件”、“打开模拟器”来选择你喜欢的任何型号。你还可以使用 Expo Go 在移动设备上模拟你的应用程序，但使用 Xcode 的内置模拟器渲染代码更新要快得多，这就是我们将在本教程的其余部分中要使用的。
在屏幕中央，你应该会看到上图所示的短语。你可能想知道，“我好像在哪里见过这个短语？”。的确！就在你的 App.js 文件中。
现在来演示我之前提到的渲染速度。让我们将 App.js 中的文本改得再简单点。怎么样？保存文件后，你应该会看到更改几乎立即发生！很酷，对吧？
如果你在想“怎样会变得更酷？” 等到你看到模拟器开发者菜单。选择模拟器并按 command + d。
当你需要重新加载APP时，你会发现这个开发人员菜单特别酷。当由于代码中的错误而使快速渲染变得有点奇怪时，这个菜单就会非常给力。
现在我们已经运行了模拟器，尽情试一试吧。尝试设计一些文本并观察快速渲染的效果。毕竟，这不正是我们开始编码的原因吗？
调试
注意！这不是bug！
如前所述，Metro Bundler 在查看 console.logs 时会派上用场。这通常是定位错误的最快方法，但有时却不是最有效的。
让我们先试试这个，你选择的。Console.log 字符串。对我来说，我会坚持经典至上。
当你打开 Metro Bundler 选项卡并选择你之前在窗口左侧选择的设备时，你应该会看到你的 console.log。这很有趣，但正如我所说，它不是最有效的，这就到了Chrome 调试器的用武之地。
为了证明这一点，我们须在app中创建一个bug。我知道，这样亵渎神明，但必须这样做。那让我们继续在 app 组件中大干一场吧。
保存文件后，你会注意到模拟器的日子不好过了。
虽然我们有这个红色框告诉我们应用程序中存在错误，但这提示没啥用，现在情况并非总是如此。虽然有些错误消息更有帮助，但对于这件事，我们最好运行 Chrome 调试器。
open up a new tab in the Chrome browser.
首先，我们要忽略此错误消息并打开模拟器开发人员菜单。还记得捷径吗？命令 + d。
然后我们要点击“Debug Remote JS”按钮。
就像运行 npm start 一样，这会在 Chrome 浏览器中自动打开一个新标签页。
在这里，我们将可以在 Chrome 中访问该应用程序的 Javascript。所以让我们继续打开我们的 Chrome 控制台。选项 + 命令 + j。
在这里你可以看到“Hello World”console.logs 和错误消息。
你还可以访问 Sources 选项卡，只要你选择了“暂停捕获异常”，Chrome 调试器就会为你定位错误位置。
蓝色暂停按钮以及橙色复选框。
完成后，请务必关闭 Chrome 调试器选项卡，因为它会明显降低APP的速度。
发布
谁还需要应用商店？
既然我们已经获得了一些乐趣并可能构建了一些很酷的东西，拿我们就可以继续发布了。将你的APP发布到 Expo 的快速方法是只需单击 Metro Bundler 中的“发布或重新发布…”按钮，然后按照那里的提示进行操作。但是对于本教程，我们将介绍另一种方法。
在 VSCode 终端窗口中，运行命令 expo publish。
运行此命令后，系统会提示你创建一个 Expo 帐户。输入电子邮件、用户名和密码。Expo 然后将捆绑你的文件和viola！发布到 Expo后，现在，你可以在手机上登录你的 Expo Go 帐户了，并向朋友展示你的工作成果。无论何时进行更改或添加功能，只需再次运行 expo publish 即可重新发布更改。
打包/后备
- React Native 可能非常挑剔。记住使用最佳调试实践和智能 console.logs。
- React Native 的文档写得很漂亮。它是最佳选择。
- 虽然看起来你可以在开发阶段使用 QR 码共享APP，但我发现它们似乎不起作用。这可能与 iOS 对 QR 码的政策变化有关。幸运的是，它可能仍然适用于 Android。
- 如果你创建一个APP，你真的很想继续跟进，那么你必须通过应用程序商店。
- 这是一个 React Native 入门教程。目前仍有很多东西需要探索。
最后的想法
非常感谢你花时间阅读本教程。我希望它能对你的学习有所帮助，并帮助你创建更炫酷的东西。
最后，如果你想观看我正在开发的 React Native APP的快速演示视频，可以在此处查看：https : //youtu.be/kOlgU3YCHXs
编码愉快！
原文作者 William Watson
原文链接 https://medium.com/nerd-for-tech/react-native-an-unexpected-tutorial-ac5b597e0465
