React Native环境配置全指南
React Native 作为 Meta 推出的跨平台移动应用开发框架，允许开发者使用 JavaScript 构建原生级应用。本文将提供一份详尽环境配置指南，覆盖 MacOS 和 Windows 两大操作系统，并针对每个平台分别阐述 iOS 和 Android 的环境搭建方案，同时一些小技巧
前置准备
这里是 mac、windows 平台都需要的一些环境依赖，开发者可以根据自己系统选择对应的安装操作即可
Git
git是一个分布式版本控制软件，项目中都会用，就不用多说了。新同学可以查看 git 网址链接学习一下
Node
首先就是操作系统上必须有 NodeJS 环境，且 Node 版本要不小于 18.8，建议使用 LTS 长期稳定版本，一般偶数的为稳定版本
安装 Node 的方式有很多种，推荐使用包管理器：
- n：推荐 mac 用户使用
- nvm：推荐 windows 用户使用
具体的安装步骤就不再赘述了，可以查看往期文章Node 手把手安装
包管理器
ReactNative 项目中使用到的一些第三方插件都会从包管理器中拉取，也就是 npm，当我们完成 Node 安装后默认就有了 npm，这里需要提到的是 registry 问题
由于 npm 的仓库位于国外，对于一些第三方包的安装会有严重的网络问题，为了避免网络造成的一系列问题，可以将仓库代理到国内，代理的方式有很多，最简单的：
➜ npm set registry xxxx但这里推荐使用nrm来管理代理
➜ npm install -g nrm
# 使用
➜ nrm ls
* npm ---------- https://registry.npmjs.org/
yarn --------- https://registry.yarnpkg.com/
tencent ------ https://mirrors.tencent.com/npm/
cnpm --------- https://r.cnpmjs.org/
taobao ------- https://registry.npmmirror.com/
npmMirror ---- https://skimdb.npmjs.com/registry/
huawei ------- https://repo.huaweicloud.com/repository/npm/Java Development Kit
Java JDK 是构建 Android 应用必不可少的依赖，官方是推荐使用Azul Zulu提供的 JDK
这里推荐使用 JDK 包管理器jenv，更加方便快捷，支持多平台
➜ jenv versions
* system (set by /Users/user/.jenv/version)
21.0
21.0.2
openjdk64-21.0.2使用还是很简单，读者可参考它的文档
MacOS 平台配置
这部分来看看 mac 平台对于 ios、Android 的一些相关配置
Watchman
Watchman是 Facebook 开发的一个工具，用于监视文件系统中的变化。安装它以获得更好的性能
➜ brew install watchman
➜ watchman --version
2024.01.22.00Xcode
安装Xcode最简单的方法是通过 Mac App Store。安装 Xcode 也将安装 iOS 模拟器和所有必要的工具来构建你的 iOS 应用
Command Line Tools
你还需要安装 Xcode 命令行工具。打开 Xcode，然后选择Settings…（或Preferences…）从 Xcode 菜单中。转到位置面板，通过在命令行工具下拉菜单中选择最新版本来安装工具
📢 注意：可能会遇到一些网络问题，可使用魔法
ios 模拟器
然后要安装模拟器，打开Xcode > Settings…（或Preferences…），然后选择 Platforms（或 Components）选项卡。选择您希望使用的 iOS 对应版本的模拟器
如果你使用的是 Xcode 14.0 或更高版本来安装模拟器，打开Xcode > Settings > Platforms选项卡，然后点击“+”图标并选择 iOS 选项
📢 注意：可能会遇到一些网络问题，可使用魔法
CocoaPods
CocoaPods是 iOS 可用的依赖管理系统之一。#CocoaPods 是一颗 Ruby 宝石。您可以使用最新版本 macOS 附带的 Ruby 版本安装 CocoaPods
➜ gem install cocoapods
➜ pod --version
1.14.3到这里在对于 ios 在 mac 的配置就基本上完成了
Android Studio
如果您是 Android 开发新手，那么设置开发环境可能有些繁琐。如果您已经熟悉 Android 开发，那么您可能需要配置一些东西。在任何一种情况下，请确保仔细遵循下面的几个步骤
下载 Android Studio 安装Android Studio过程中，确保选中以下所有项目旁边的框
- Android SDK
- Android SDK Platform
- Android Virtual Device
- 安装 Android SDK Android Studio 默认安装最新的 Android SDK。然而，用本地代码构建 React Native 应用需要
Android 15 SDK。额外的 Android SDK 可以通过 Android Studio 中的 SDK 管理器安装
- 安装 Android SDK CommandLine Tool
- 安装 Android virtual device 模拟器
环境变量 React Native 工具需要设置一些环境变量，以便用本地代码构建应用程序
- 打开
.zshrc或.bash_profile等配置以下内容
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools执行source .zshrc后验证 Android 一些环境
➜ adb devices # 应显示设备列表
➜ emulator -list-avds # 查看创建的模拟器到这里关于 Android 的 Mac 环境就配置好了
Windows 平台配置
window 平台不支持 ios 或 mac 平台相关的开发，所以就来看看 Android 的配置
和 mac 上 Android 的配置一样，首先也是安装 Android Studio，安装及操作步骤可以参考上文 mac 配置的
不一样的就是环境变量
也是非常简单
好了，到这里 windows 的配置也就讲完了
脚手架
在现代 web 开发中越来越多的框架提供脚手架解决方案，使用脚手架可以帮助开发者快速搭建应用，如：ReactCLI、Next、VueCLI、Nuxt 等等，这些框架或者脚手架帮助开发者完成大部分的开发工作，大大提高开发效率
同样的，为了提升开发效率，React Native 也提供了相关的脚手架或者框架
Expo
Expo是一个生产级 React Native 框架。Expo 提供了开发人员工具，使开发应用程序变得更加容易，例如基于文件的路由、本地模块的标准库等等
Expo 是现在官方最推荐的 ReactNative 开发方式，它支持很多功能，开发体验也很好，读者可以认真研究下它的文档
使用 Expo 快速创建 ReactNative 应用：
➜ npx create-expo-app@latest
#指定模板
➜ npx create-expo-app@latest --template选择创建的模板：
ReactNative CLI
如果你老早以前就用过 Reactnative 那一定知道他的 CLI，类似与 React Web 脚手架一样，不过目前已经不推荐使用了，expo 在性能和能力方面已经非常出色
除非你的 APP 特殊场景原因不得不放弃使用 Expo，那么也可以使用Community CLI
➜ npx @react-native-community/cli@X.XX.X init AwesomeProject --version X.XX.X结语
好了，到这里关于 ReactNative 的环境配置就讲完了，其实跟着文档一点一点是不会有问题的，一般大多数的问题是关于网络、环境变量。快开始你的 App 开发之旅吧~
感谢支持
