react native 项目环境搭建

除了官方文档外还需要踩的坑

react native官网-环境搭建官方指导

1. node工具链安装

   1 2 3 4 5 6 7

   $ brew install node $ brew install watchman # 使用nrm工具切换淘宝源 $ npx nrm use taobao # 如果之后需要切换回官方源可使用 $ npx nrm use npm $ npm install -g yarn

   注意事项：

   • brew的安装和换源：tuna官方文档
   • watchman安装中brew会多次报找不到模块的错误Error: No such file or directory @ rb_sysopen，根据brew的保存安装对应模块即可，可能存在2~3个模块的缺失

2. ruby包管理工具rvm安装：请检查ruby --version，版本建议>2.6.0 & <=3.0.0，如果版本过高或过低建议下载rvm进行ruby版本的管理和替换

   1 2 3 4 5 6

   # 安装gpg公钥工具 $ brew install gnupg # 安装mpapis公钥 $ gpg --keyserver hkp://pgp.mit.edu --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB # 安装最新版本Ruby的rvm $ \curl -sSL https://get.rvm.io | bash -s stable --ruby

   注意事项：

   • 使用curl命令需要在终端挂梯子。否则会报SSL443 (43)等各种错误，没有条件的请自行寻找rvm的安装方式。

     1 2	# ip和端口请关注自己服务器设置中inbounds的监听IP和端口。注意http和socks协议端口的不同 $ export https_proxy=http://127.0.0.1:1087 http_proxy=http://127.0.0.1:1087 all_proxy=socks5://127.0.0.1:1080

3. ios工具链安装

   1 2 3 4 5 6 7 8 9 10

   # gem换源 $ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/ $ gem sources -l # 确保只有 gems.ruby-china.com https://gems.ruby-china.com # cocoapods安装 $ sudo gem install cocoapods安装 # cocoapods安装换源 $ pod repo remove master $ pod repo add master https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git $ pod repo update

   注意事项：

   • react native官方文档除了使用gem安装cocoapods还提到使用brew安装，建议使用gem，使用brew安装后续会因为版本和安装位置运行不顺利
   • rubyGem源替换：rubyGem源替换：ruby-china官方文档
   • CocoaPods源替换-tuna官方文档

4. 编译和运行

   1 2 3 4 5 6 7

   # 详细参数解释参考https://reactnative.cn/docs/environment-setup npx react-native init AwesomeTSProject --template react-native-template-typescript cd AwesomeProject cd ios open -e podFile # 在第一行加上 source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git' cd .. yarn ios

   • 按照上述过程安装制定版本的ruby和gem后应当能够无报错正常搭建应用，第一次构建的等待时间可能较长(2~5分钟)
   • 如果正常打开模拟器但终端出现大量关于gem模块版本的报错或者Failed to install CocoaPods template等报错，请检查是否正确按照上述步骤中的官方文档更换ruby gem和CocoaPods源