超详细 React Native 入坑使用指南，我在元宇宙等你

前言

大家好，我是虚竹，今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境，并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码。编写丝滑般代码会再下一篇输出，包括项目实战经验总结和踩坑，如目录架构、函数式编程、React Hook 灵活运用、常见场景、开发调试、发布部署、踩坑、性能优化等等。

之前因为在我的技术群，收到群友@我，问能否出一个保姆级 React Native 搭建开发环境的教程，我说照着官方文档步骤操作即可。可惜事与愿违没那么顺利，流程上繁琐不够清晰，版本更新太快，网上解决方案各种说法不一，技术工具也在时时变。

由于最近我们团队有个新项目，涉及各种端的应用开发任务（如PC端、手机端、平板端、H5端），技术选型上我们前端内部经过激烈讨论（之前的项目主导前端框架是 Vue.js），最后决定全部基于 React 框架进行开发。

好处毋庸置疑，紧跟前端发展趋势尝试各种新技术。对自身加深印象，技能更上一层，实战与理论相结合，还能帮助更多新手一起打怪，对团队成员多掌握一门前端技术，不是孤军奋战，我们是一个 Team。💪

为何挑选 React Native

• 大公司背书技术已成熟
• 社区活跃开发者多
• 基于 React 易上手开发效率高
• 跨平台兼容性
• 接近原生应用
• 秒速刷新
• 节约公司成本
• 一次学习，随处编写

介绍 React Native

React Native（简称 RN）是 Facebook 于2015年4月开源的跨平台移动应用开发框架，是 Facebook 早先开源的 JS 框架 React 在原生移动应用平台的衍生产物，支持 iOS 和安卓两大平台。RN 使用 Javascript 语言，类似于 HTML 的 JSX，以及 CSS 来开发移动应用，因此熟悉 Web 前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

仅供参考

最佳实践完美组合技术栈：React + RN + ES6 + Flex + Hook + Function Component + Axios

前置知识

• HTML + CSS + JS（基础）
• React v17.0.2（基础）
• React Hook
• RN v0.66
• Flex 布局
• ES6/7/8
• Ajax（Axios）
• Node v14.0.0+
• Android Studio
• 中文版官方文档不离手（React¹ & React Native²）

环境搭建

• 操作系统：win10 专业版
• 手机：安卓手机真机一部 & 夜神模拟器一个
• 必须安装依赖：Node、Yarn、JDK、Android Studio（Android SDK）、Python2、Xcode（Mac）

Node 安装

直接 Node 官网下载对应版本，不过建议使用 NVM 工具来安装与版本切换方便快捷。

NVM 官网下载地址³

我的 Node 版本是 v14.0.0，官方指定版本要求大于12以上就行。请以管理员身份安装 Node，然后一直按下一步下一步完成即可。

Yarn 安装

// 使用 npm 全局安装 yarn
npm install yarn -g

// 检查版本是否安装成功
yarn -v

配置环境变量，如下图所示：

python2 安装与配置

Windows 10 平台，以管理员身份安装 python2.7，执行命令如下：

npm install --global --production windows-build-tools

我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 新建系统变量 -> path 路径新建环境变量，如下图所示：

// 检验配置是否成功
python -V

JDK 安装与配置