react native的开发环境搭建和出坑指南_玄空z

网络 02-07 6190

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

成果展示

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

电脑环境

必须：Xcode, Android Studio

rn-ios

官网：https://·/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://·/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.遇到问题不要气馁，办法总比困难多