1. React Native前置知识要求
在开始学习React Native之前，有一些前置知识你需要了解。不过别担心，我会带你逐步掌握这些内容，让你顺利入门。
1.1. JavaScript是必须掌握的
学习React Native，JavaScript是基础。你需要了解JavaScript的核心知识，比如：
- 变量（Variables）
- 函数（Functions）
- 数组（Arrays）
- 对象（Objects）
- Promise 和 async/await
- ES6 特性：箭头函数、解构赋值、扩展运算符等
如果你还不熟悉 JavaScript，不用担心。在课程的附录里安排了一个信息密集的JavaScript速成课，专门讲解 React Native所需要的JavaScript知识。
1.2. TypeScript 虽非必需，但强烈推荐
TypeScript不是学习React Native的前置要求，你完全可以用JavaScript开始。但从长远来看，我强烈推荐你了解 TypeScript。它有很多优势：
- 提升代码质量
- 减少 bug
- 更强的 IDE 支持和自动补全
- 更易维护大型项目
你可以先从JavaScript入手，后续再逐步学习TypeScript。
1.3. React.js 有帮助，但不是前提
虽然React.js和React Native在很多方面非常相似，比如组件、状态管理、props、Hooks 等等，但你不需要先学 React.js 再来学本课程。
在课程中，每当我写一行 React 相关代码，都会讲解它的作用和背后的概念。所以，即使你没有React.js的基础，也能顺利跟上课程内容。
1.4. 小结
开始这门React Native课程之前，你只需要掌握一件事：JavaScript。
TypeScript和React.js都不是必须的，我会在课程中为你讲解相关内容，帮助你循序渐进地掌握它们。
这门课程对初学者非常友好，无论你有没有前端开发经验，只要愿意学习，就能一步步掌握React Native。
准备好了吗？让我们开始学习吧！
2. 什么是React Native
你有没有想过，用一套代码同时开发iOS、Android和HarmonyOS应用会是多么高效？这就是React Native带给我们的魔力。
React Native是由 Meta（前身为Facebook）开发的一个开源JavaScript框架。它让开发者能够使用同一份代码，轻松打造跨平台的移动应用。换句话说，你写一次代码，就能同时运行在Android、iOS和HarmonyOS上，这不仅节省了大量时间和开发成本，也大大减轻了维护压力。
2.1. 为什么选择 React Native？
首先，React Native拥有庞大且活跃的社区和生态系统，这意味着你可以很容易找到各种资源、插件和技术支持。它使用 JavaScript或TypeScript编写，而JavaScript是目前最流行的编程语言之一，对很多开发者来说都非常熟悉。
对于有网页开发经验的程序员来说，学习React Native也是一条相对顺畅的路，因为它们有很多相似的概念和语法。
此外，React Native提供了“热重载”和“快速刷新”的功能，这让开发过程更加高效，修改代码后可以立即看到效果，大大提升了开发体验。
2.2. React Native 的行业应用
全球许多知名企业都选择了React Native来构建他们的移动应用，比如国外的Facebook、Instagram、Uber Eats、Pinterest、Walmart、Shopify、Tesla、Bloomberg、Discord、Microsoft等。
在中国，React Native 也受到了广泛认可和应用。阿里巴巴、京东、美团、字节跳动（抖音）、腾讯、饿了么、滴滴出行、小红书等多家互联网巨头，都在他们的产品中使用了React Native技术。
这些公司选择React Native的一个重要原因是，它帮助他们节省了招聘两支开发团队的成本和时间——iOS、 Android和HarmonyOS只需一支团队即可维护三套平台，大大降低了项目复杂度和预算。
2.3. 关于鸿蒙系统（HarmonyOS）
本课程主要聚焦于在Android 和 iOS平台上的应用开发，对于React Native结合鸿蒙系统（HarmonyOS）的开发内容，我将会在另一门专门课程中为大家详细讲解。
3. Expo 与 React Native 的区别
我有一个好消息要告诉你！
但在此之前，我们先来了解一下Expo CLI和React Native CLI之间的区别，以及它们各自的优缺点。
在学习React Native的时候，你首先需要决定选择哪种开发方式来学习和使用，因为它们有很多共同之处，但也存在一些差异。React Native Expo和React Native CLI的LOGO如图1-1所示。
图1-1 React Native CLI与React Native CLI
3.1. 什么是 Expo？
Expo是一个基于React Native之上的开发框架，它简化了开发流程，因为它提供了“托管式工作流”，也就是说：
你不需要配置Xcode或 Android Studio，甚至不需要涉及任何原生配置。
只需安装Expo，就可以立即运行你的React Native项目，极其方便。
3.1.1. Expo 的优点
- 超级简单易上手
- 自带丰富的内置API，如相机、通知、定位等
3.1.2. Expo 的缺点
- 打包后的应用体积相对较大
- 对原生模块的访问能力有限（某些功能无法实现或需额外配置）
3.2. 什么是 React Native CLI？
React Native CLI是使用React Native的默认方式，它给予你对原生代码的完整控制权。你会发现项目中包含 Android和iOS的原生文件夹，如图1-2 所示。
图1-2 React Native CLI项目目录结构
3.2.1. React Native CLI 的优点
- 可以完全访问原生模块
- 打包后的应用体积更小
3.2.2. React Native CLI 的缺点
- 配置环境相对复杂，需要设置Android Studio和Xcode
- 启动成本较高，开发速度比Expo稍慢一些
3.3. 那么问题来了，应该选择哪一个？
好消息是：React Native CLI和Expo CLI有很多共同点。
当你开发 UI 的时候，你会发现大约90%~95%的代码是完全相同的，也就是说，它们并不是完全不同的两个体系。
- 如果你是创业者或希望尽快上线应用的开发者，推荐使用Expo CLI，简单快速，适合快速验证产品。
- 如果你是想找React Native开发工作的学习者，推荐学习React Native CLI，因为在招聘市场上，企业更多使用 CLI 模式来开发。
3.4. 第二个好消息！
在本课程中，你将会学习两种方式：Expo CLI和React Native CLI。
我们会从更简单、上手更快的Expo开始学起，然后再过渡到CLI，帮助你逐步打下扎实的开发基础！
4. Expo Snack 使用
在正式进入React Native的开发之前，我想先向你介绍一个非常实用的小工具 —— Expo Snack。
4.1. 什么是 Expo Snack？
Expo Snack是一个可以让你直接在浏览器中编写和运行React Native代码的平台。你无需安装任何开发环境，只需要一个浏览器和网络，就可以立即体验React Native的魅力。
你只需在Google搜索 “Expo Snack”，点击第一个结果 —— “Snack - React Native in the browser - Expo”，即可进入使用页面。或者直接使用浏览器访问官方网站。网站的默认界面如图1-3所示。
图1-3 Expo Snack官网首页
虽然我们在课程中不会用Expo Snack来构建真正的项目，但我还是希望你了解这个工具，因为它真的非常方便，特别适合：
- 快速尝试想法
- 与他人协作调试
- 演示代码片段
- 进行跨平台预览测试（iOS 和 Android）
4.2. 它具体能做什么？
4.2.1. 在线协作
你可以通过分享Snack链接，与他人实时编辑代码，非常适合团队调试。
4.2.2. 跨平台预览
无需真机，你可以直接在浏览器中预览Web、iOS、Android效果，如图1-4所示。
图1-4 在浏览器里预览Web、iOS、Android各平台页面效果
4.2.3. 真机调试
4.2.3.1. 直接下载Expo
你也可以选择在自己的手机上运行代码。只需从App Store或Google Play下载Expo Go（如图1-5），然后扫码，就可以在真机上直接查看效果，非常方便。
图1-5 访问链接或扫码下载Expo。
4.2.3.2. iPhone手机下载、安装及运行Expo Go
iPhone(苹果)手机直接去App Store上下载和安装Expo Go。具体操作过程效果图截图如图1-6所示。
AppStore下载界面 |
下载安装成功界面 |
Expo Go 打开界面 |
|
|
|
|
图1-6 iPhone手机上下载、安装及运行效果图