react native的开发环境搭建和出坑指南

最近在用rn开发app，一路走来踩了很多坑，这一篇先说一下开发环境搭建的步骤和坑。

成果展示

先看下再ios和android模拟器上成功跑起来的样子。

电脑环境

必须：Xcode, Android Studio

rn-ios

官网：https://www.react-native.cn/docs/environment-setup

安装依赖

必须安装的依赖有：Watchman、CocoaPods。

* 安装 watchman
  brew install watchman
	检测是否成功：watchman -v
  
* 安装CocoaPods
	// 介绍：是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）。
	// 从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖
	sudo gem install cocoapods
  或brew install cocoapods

Xcode环境准备

● Xcode 的命令行工具
○ Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。
● 在 Xcode 中安装 iOS 模拟器：
○ Xcode / Preferences / Components 选择一个模拟器进行安装，大约5G

运行rn项目

1.方法1
在项目根目录中运行

yarn ios
# 或者
yarn react-native run-ios

此命令会对项目的原生部分进行编译，同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理（类似 webpack）。Metro服务也可以使用yarn start命令单独启动。
提示：如果此命令无法正常运行，请使用 Xcode 运行来查看具体错误（run-ios 的报错没有任何具体信息）。注意 0.60 版本之后的主项目文件是.xcworkspace，不是.xcodeproj！

2.方法2
在Xcode中点击按钮启动项目

ios中的坑

● CocoaPods的坑
0.60 及以上版本的原生依赖是通过 CocoaPods 集成安装的。CocoaPods 的源必须使用代理访问（镜像源也无效）。如果在 CocoaPods 的依赖安装步骤卡住（命令行停在 Installing CocoaPods dependencies 很久，或各种网络超时重置报错，或在ios目录中无法生成.xcworkspace文件），请务必检查确定你的代理配置是否对命令行有效。
处理方法：搞个vpn，确保能访问外网。然后根据提示，cd ios文件夹，然后pod install，可能会失败很多次，重复pod install直到成功。
2. 创建项目的坑
由第一步延伸处理来的在 npx react-native init AwesomeProject 时最后用CocoaPods安装ios包失败；接着在启动项目yarn ios 时报错，此时需要pod install继续安装包。记得开个vpn代理。

rn-android

安装依赖

必须安装的依赖有：JDK，Android Studio

* 安装jdk
	brew install adoptopenjdk/openjdk/adoptopenjdk8
	查看版本：javac -version

* 安装Android Studio
	下载地址：https://developer.android.google.cn/studio/
	安装界面中选择"Custom"选项，确保选中了以下几项：
		Android SDK, Android SDK Platform, Android Virtual Device

* 配置环境变量-参考官网
	1. ~/.zshrc
	2. vi ~/.zshrc
	3. 复制粘贴下边的东西
    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/emulator
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools
	4. source $HOME/.zshrc 使环境变量设置立即生效

* 配置一个模拟器

* 运行
	$ yarn android
  注：另一个终端会自动 再启动一个东西
  最终再android studio 中运行项目

配置Android Studio

注：这一步很繁琐，建议跟着官网走，涉及到推荐的android版本，
https://www.react-native.cn/docs/environment-setup

使用Android模拟器
使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备。
如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device…"，然后选择所需的设备类型并点击"Next"，然后选择Q API Level 29 image.

运行rn 项目

1.方法一：
在项目根目录中调用终端输入命令

yarn android
# 或者
yarn react-native run-android

此命令会对项目的原生部分进行编译，同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理（类似 webpack）。Metro服务也可以使用yarn start命令单独启动。
如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的代理软件，否则将频繁遭遇链接超时和断开，导致无法运行。

2.方法二：
在模拟器中点击启动按钮。

总结

到此，rn的环境搭建完毕，可以跑起来了。
总结一下：
1.核心点还是要搞个代理使用vpn来下载东西或装包。
2.遇到问题不要气馁，办法总比困难多