React Native环境配置过程笔记

适用于mac配置环境。

需要提前准备好梯子。

使用国内镜像会带来不容易发现的坑。

	版本
React Native	0.72
Node	16+
Homebrew	4.1.10
mac系统	13+

备注：mac 系统版本13+ 为了保证xCode的安装 以及一些环境依赖的安装 11+的版本不配置ios环境可不升级

Node

使用 nvm 或者 n 命令切换node到最新长期维护版本即可，React Native官方建议的是16+

Homebrew安装watchman

使用Homebrew来安装 Watchman。
(Homebrew版本过低报错，请升级 Homebrew)

brew install watchman

Android环境配置

备注:
必须安装的依赖有：Node、JDK 和 Android Studio。准备好梯子这是必要条件。

1. Java Development Kit

   brew tap homebrew/cask-versions
   brew install --cask zulu11
   

   javac -version来查看你当前安装的 JDK 版本。

2. 安装 Android Studio
   下载和安装 Android Studio，国内用户可能无法打开官方链接。
   请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项：

   • Android SDK
   • Android SDK Platform
   • Android Virtual Device

   然后点击"Next"来安装选中的组件。（注意：当前默认的版本是34 SDK，rn需要33。）

3. 切换SDK版本

   官网的图太久远，我附上一张新的位置 点击 More Actions 可以看到操作选项
   

   Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 13 (Tiramisu)

   在 Android Studio 的 SDK Manager 中选择安装当前版本适应 SDK。

   在 SDK Manager 中选择SDK Platforms选项卡，然后在右下角勾选Show Package Details。展开Android 13 (Tiramisu)选项，确保勾选了下面这些组件（重申你必须使用稳定的代理软件，否则可能都看不到这个界面）：

   • Android SDK Platform 33
   • Intel x86 Atom_64 System Image
   • Google APIs ARM 64 v8a System Image（针对 Apple Silicon 系列机型）

   然后点击SDK Tools选项卡，同样勾中右下角的Show Package Details。展开Android SDK Build-Tools选项，确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。

点击Apply来下载和安装选中的这些组件。
创建完成后请为了清晰不出错删除34版

4. 创建模拟器并删除默认安装的模拟器

点击Virtual Device Manager 进入

创建一个API 33的模拟器

5.配置环境变量 ANDROID_HOME
如果你安装android sutdio 过程中选择的是都是默认选项 那么
检查 shell 终端输入 echo $0

zsh 则配置文件为~/.zshrc

bash 则配置文件为~/.bash_profile

终端使用 vi ~/.bash_profile 或者 ~/.zshrc 打开编辑 复制下面的环境变量 黏贴
然后 按esc 输入:wq! 保存
（也可以去配置文件进行修改）

    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

配置IOS

1. 需要检查 ruby 是否为最新版本 或者直接时候升级命令（梯子）

注意：第二个命令是设置环境变量,请根据个人情况切换变量位置

   检查 shell 终端输入 echo $0

   zsh 则配置文件为~/.zshrc

   bash 则配置文件为~/.bash_profile

    brew install ruby
    echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile
    source ~/.bash_profile

2. 安装 Xcode

   当前的Xcode 版本mac 13+可安装可官网安装，也可以直接APP Store 搜索Xcode安装
   安装过程中选择对应设备即可

3. cocoapods

   CocoaPods是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 CocoaPods。CocoaPods 的版本需要 1.10 以上。（梯子）

   sudo gem install cocoapods
   

   不建议是用brew 有可能启动项目失败

创建项目

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：

 npm uninstall -g react-native-cli @react-native-community/cli

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用（注意 init 命令默认会创建最新的版本）：

npx react-native@latest init AwesomeProject

如果你安装了Android没有安装IOS相关环境 报了IOS xxxx 忽略它，因为环境缺失，不影响启动Android

当你Android 和 IOS 都安装了，项目初始化成功应该是这样的

启动Android (建议将Android模拟器打开 )

cd AwesomeProject  
yarn android 

启动中报错有些不会造致命错误，比如（模拟器启动太慢了它等不了）：

启动IOS

cd AwesomeProject  
yarn ios  

完成！