React Native环境问题与解决方案

React Native中文网推荐使用Homebrew来安装Node和Watchman。

安装Homebrew时，可能会遇到*，采用以下方式安装避免*

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

等Homebrew安装完成，就是可以安装Node和Watchman。

安装详情可以查看搭建开发环境

用npx react-native init 项目名称，来初始化项目，可能会遇到以下问题

roadprogramdeMacBook-Pro:ReactNativeWS xxx$ npx react-native init Test
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/roadprogram/.npm/_cacache/content-v2/sha512/0b/65
npm ERR! errno -13
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/xxx/.npm"

按着提示执行命令

sudo chown -R 501:20 "/Users/xxx/.npm"

继续执行命令

npx react-native init Test 

打印

✔ Downloading template

✔ Copying template

✔ Processing template

✖ Installing CocoaPods dependencies (this may take a few minutes)

✖ Installing CocoaPods dependencies (this may take a few minutes)

error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.

Please try again manually: "cd ./Test/ios && pod install".

CocoaPods documentation: https://cocoapods.org/

 

执行跳转命令到ios目录下，执行pod install,打印结果如下：

[!] CDN: trunk Repo update failed - 43 error(s):
CDN: trunk URL couldn't be downloaded: https://raw.githubusercontent.com/CocoaPods/Specs/master/Specs/3/2/5/FlipperKit/0.11.1/FlipperKit.podspec.json Response: Couldn't connect to server

很明显是连不上服务器，此时查看一下自己的CocoaPods版本，因为CocoaPods 1.8将CDN切换为默认的spec repo源。

执行命令 pod --version,打印结果如下：

1.9.1

按照官方文档 podfile文件中添加source源：

source 'https://github.com/CocoaPods/Specs.git'

podfile文件中添加source源后，pod install和pod update可以正常操作。继续执行 pod install,打印结果如下：

[!] Unable to find a specification for `Flipper-DoubleConversion (= 1.1.7)`

You have either:
 * out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

如果pod search出问题，可以考虑执行

pod repo remove trunk

按着提示执行(执行完成update可能安装还会出现上个问题，多update几次)

///用来更新本地cocoapods的spec资源配置信息
pod repo update

更新完成后执行 pod install 就可以看到

Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing CocoaAsyncSocket (7.6.4)
Installing CocoaLibEvent (1.0.0)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.62.2)
Installing FBReactNativeSpec (0.62.2)

等安装完成，就可以执行 yarn ios看到项目启动了，执行结果如下：

yarn run v1.22.4
$ react-native run-ios
info Found Xcode workspace "Test.xcworkspace"
info Launching iPhone 11 (iOS 13.3)
info Building (using "xcodebuild -workspace Test.xcworkspace -configuration Debug -scheme Test -destination id=4A69F313-8ACB-4950-BA22-206966631C4F")
.......................................................................................................................................................