一、简述
新到公司发现有RN项目😢？环境搭建不知道如何下手😢？别着急😄！本文将手把手教你如何搭建RN环境（IOS）
由于外网限制，在此过程中可能导致下载不顺利😢，如果想要丝滑的完成整个环境的搭建，一定要准备一个代理软件！!
当我们修改
.zshrc或.bash_profil文件后，想要生效记得source一下
系统信息
我的电脑信息：
- MacBook Pro 13英寸 2022
- 芯片：Apple M2
- macOS： Sonoma 14.4.1
我的最终文件配置： 后期会一步一步教大家如何配置~😄
准备
- 一部Mac电脑（macOs可搭建苹果安卓两个环境）
- 苹果手机/手机电脑连接线
- macOS系统更新至最新
- 参考文档：React Native中文网-0.70版本
- 开发工具，我使用的vs code
- 设置mac文件夹可以显示所有的文件，如下：
// 终端输入
defaults write com.apple.finder AppleShowAllFiles TRUE
// 默认显示苹果所有文件 true
killall Finder
// 这一步相当于确定
- 连接VPN代理，并设置终端代理
// 终端输入：
touch .bash_profil
open -e ~/.bash_profil
// 在.bash_profil文件配置
export https_proxy=http://127.0.0.1:7897（端口改为VPN上的端口设置）
// 终端输入：
source ~/.bash_profil
// 就可以开始在当前终端窗口install啦！网速嘎嘎快！
二、开始
前期准备都好了，那就开始搭建环境吧！🆙
-
环境搭建
-
安装Homebrew
Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能
❗️如果没有代理，可能导致失败，可尝试Homebrew镜像安装
我的版本：Homebrew 4.2.17
如果有代理，网络情况较好，可执行如下官网安装命令：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
安装过程中出现的问题及解决方案：
- Error: Failed to download https://formulae.brew.sh/api/formula.jws.json! Failed to download https://formulae.brew.sh/api/cask.jws.json!
- M2安装Homebrew报错unable to access github.com/Homebrew/brew
-
安装git
// 终端输入：
brew install git
-
安装Nvm
node.js版本管理工具，可以在同一台设备上安装和切换使用不同版本的Node.js
我的版本：Nvm 0.39.7
// 终端输入：
brew install nvm
mkdir ~/.nvm
open -e ~/.bash_profil
// 在.bash_profil文件配置：
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion
// 终端输入：
source ~/.bash_profil
// 查看版本
nvm -v
-
安装node
node版本至少14以上
// 终端输入：
nvm install 18.20.2
nvm use 18.20.2
-
安装watchman
Watchman是用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等。
我的版本：watchman 2024.04.08.00
// 终端输入：
brew install watchman
// 查看版本
watchman -v
-
安装Yarn
// 终端输入：
npm install -g yarn
-
安装Ruby
Ruby 是一种通用编程语言。React Native 在某些与 iOS 依赖管理相关的脚本中会使用到它
检查系统当前所使用的 Ruby 版本
// 终端输入：
ruby --version
我的系统Ruby版本：ruby 2.6.10p210
但是官网给出0.70版本的ruby应该为此版本 2.7.5，所以我们需要重新安装ruby，此过程可能🤔遇到问题，需要一步一步耐心安装
在这里我使用ruby版本管理器-rbenv安装ruby
- 安装rbenv
// 终端输入：
brew install rbenv ruby-build
// 查看版本
rbenv -v
我的版本：rbenv 1.2.0
- 安装ruby
// 终端输入：
rbenv install 2.7.5
- 设置全局ruby为指定版本
// 终端输入：
rbenv global 2.7.5
// 查看版本
ruby -v
查看ruby版本还是系统版本，global没有生效？如下配置 rbenv环境变量
// 终端输入：
touch .zshrc
open -e ~/.zshrc
// 在文件中添加
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
// 终端输入：
source ~/.zshrc
rbenv global 2.7.5
// 查看版本
ruby -v
这样就成功啦🎉
我们也可以新开一个窗口查看ruby版本，如果仍然生效，说明已经全局作用🎉
-
安装CocoaPods
iOS 的 npm， 需要使用 CocoaPods 来管理依赖
我的版本：pod 1.15.2
// 终端输入：
brew install cocoapods
// 查看版本
pod --version
-
安装Xcode
在 App Store下载最新版xcode
以上环境就搭建好啦！
-
开发流程
-
克隆项目
注意：把项目目录放到用户目录下面跟Downloads（下载），Documents（文稿）这些目录平级，否则会导致一些权限问题
// 全局设置Git用户名、邮箱、密码
git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"
git config --global credential.helper store
// 目录结构
|----rnProject
|-----ios (ios模块代码)
|-----Page
|-----index.js
|-----xxx
-
启动Xcode
-
安装ios依赖
终端打开/Users/admin/rnProject/ios
// 重启代理软件并在ios目录终端下输入：
source ~/.bash_profil
// 查看代理是否生效 https_proxy=http://127.0.0.1:7897
env
// 进行安装
pod install
pod install 失败遇到的问题
问题一： ios安装依赖不仅需要使用内部的一些插件，还有使用外网的一些插件。这将会导致下载中途失败！
当我们遇到Error installing xxxx的时候，如果是https://github下载失败，请新开终端打开代理继续执行`pod install，如果不是，则请新开终端关闭代理继续执行pod install`，这样反复关闭打开代理，可完成下载
问题二： xcrun: error: SDK “iphoneos“ cannot be located 的解决办法
-
打开
/Users/admin/rnProject/ios.xcworkspace文件
-
本地调试需在
ios项目 - Root文件夹add files将 ip文件添加进来，如下：
添加ip.tx并将内容ip修改为自己的电脑ip地址
-
切换环境配置
配置过后就可以在手机应用➡️你的APP➡️环境配置➡️切换环境
-
使用 USB 闪电数据线连接 iOS 设备到 Mac设备
-
注册开发设备（首次运行需要注册）
注意数据线是否连接成功，没有成功将搜索不到手机
-
选中真机设备
-
登录appID账户
选中该Team
-
启动
启动过程中如果出现如下弹窗，需输入电脑密码
如下图所示，如果没有出现❌，则原生部分启动成功啦！
-
启动RN模块
-
用
vs code打开rnProject项目
-
项目根目录安装RN模块依赖
yarn
-
启动
yarn start
完成两个启动，就可以开始开发啦！
-
从设备上访问开发服务器
在启用开发服务器的情况下，你可以快速的迭代修改应用，然后在设备上立即查看结果。只需要在和电脑同样的 Wi-Fi 网络。摇晃设备打开Developer menu，然后 enable Live Reload。当 JavaScript 代码改变时 app 会重载
