React Native环境搭建踩坑记录(2022/06/28-RN version:0.68.0)
作者:互联网
RN开发环境的搭建十分苛刻,官方建议不要使用简易沙盒环境,所以国内用户最好还是搭建完整的环境。
由于RN在快速迭代,搭建完整的本地开发环境,会遇到不少的坑。
主要原因是本地环境要和官网要求的相匹配,不一致的基础开发环境需要升级或降级。
虽然是按照官网的指导一步一步来的,有我本地环境不匹配,也让我折腾了好几天。
第一步、选定合适的RN版本。
我选择过0.69.0,也选择过0.61.0都没有搭建成功,这里也建议读者不要激进,也不要过于保守。
最好选择一个中庸的版本,笔者写这篇文章的时候,RN发布了0.69.0。
搭建环境过程中能找到的教程大都是这个版本之前的,新版本是有了新特性的加持,但是肯定会有一些新坑。所以最终我选择了0.68.0。
新建项目的时候记得制定好版本,否则,rn-cli会自动使用最新版本的RN生成项目。
创建空项目命令:
npx react-native init AwesomeProject --version 0.68.0
第二步、先按照官网准备好环境
笔者的开发环境:
开发平台:macOS, MAC-intel处理器版,非M1新芯片版本,M1芯片的MAC有不同的配置有哪些需要参考官网。
系统版本为:macOS 11.6.7 (20G630),
Xcode版本:Version 13.0 (13A233),
node版本:v16.15.1,
npm版本:8.11.0
cocopods版本:1.11.3
ruby: ruby 2.7.4p191 ruby在安装cocopods的时候会使用。
yarn: 1.22.18
这些基础环境的安装若有问题,需自行百度。
第三部、按照官网环境搭建一步一步安装环境,踩坑填坑。
坑1:
环境搭建成功,pods依赖安装成功,ios目录下项目生成了 .workspace工程文件。用Xcode打开项目运行到模拟器iOS13报错:
PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/yourName/Library/Developer/Xcode/DerivedData/AwesomeProject-fkorjetfkzmhgrasitikcpmmosdy/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-46EB2E00014D80.sh (in target 'FBReactNativeSpec' from project 'Pods')
大概意思是解析脚本失败:网上找到的解决方法是:
项目目录/npm_mudules/react-native/scripts/find-node.sh
把其中如下脚本注释掉:
if [[ -s "$HOME/.nvm/nvm.sh" ]]; then
# shellcheck source=/dev/null
. "$HOME/.nvm/nvm.sh"
elif [[ -x "$(command -v brew)" && -s "$(brew --prefix nvm)/nvm.sh" ]]; then
# shellcheck source=/dev/null
. "$(brew --prefix nvm)/nvm.sh"
fi
坑2:
使用模拟器启动项目后,会自动生成一个watchman的监视窗口:
大概意思是操作不被允许
watchmanResponse: { error: 'std::__1::system_error: open: /Users/yourName/Documents/Projects22/reactNative/AwesomeProject: Operation not permitted'
查询facebook官网得知,mac允许macOS 上的默认每个进程描述符限制非常低(256!),需要手动配置这数字,解除限制:
需要做的就是以下两个命令:
$ sudo sysctl -w kern.maxfiles=10485760
$ sudo sysctl -w kern.maxfilesperproc=1048576
重启电脑后此配置失效,所以可以在电脑里把配置写好,
到/etc/sysctl.conf 文件中写死配置,如果没有此文件,则创建它,录入以下内容:
kern.maxfiles=10485760
kern.maxfilesperproc=1048576
坑3:
上述配置做完之后,发现还是没有权限扫描文件夹:这次是因为watchman版本的原因,新版本的在我的macOS会有问题,需要会退watchman版本。
To reload the app press "r"
To open developer menu press "d"
jest-haste-map: Watchman crawl failed. Retrying once with node crawler.
Usually this happens when watchman isn't running. Create an empty `.watchmanconfig` file in your project's root folder or initialize a git or hg repository in your project.
Error: Watchman error: std::__1::system_error: open: /Users/wjw/Documents/Projects22/reactNative/AwesomeProject: Operation not permitted. Make sure watchman is running for this project. See https://facebook.github.io/watchman/docs/troubleshooting.
/Users/wjw/Documents/Projects22/reactNative/AwesomeProject/node_modules/metro-hermes-compiler/src/emhermesc.js:77
throw ex;
^
Error: std::__1::system_error: open: /Users/wjw/Documents/Projects22/reactNative/AwesomeProject: Operation not permitted
at BunserBuf.<anonymous> (/Users/wjw/Documents/Projects22/reactNative/AwesomeProject/node_modules/fb-watchman/index.js:95:23)
at BunserBuf.emit (node:events:527:28)
at BunserBuf.process (/Users/wjw/Documents/Projects22/reactNative/AwesomeProject/node_modules/bser/index.js:292:10)
at /Users/wjw/Documents/Projects22/reactNative/AwesomeProject/node_modules/bser/index.js:247:12
at processTicksAndRejections (node:internal/process/task_queues:78:11)
Emitted 'error' event on WatchmanWatcher instance at:
at Client.<anonymous> (/Users/wjw/Documents/Projects22/reactNative/AwesomeProject/node_modules/metro/node_modules/jest-haste-map/build/watchers/WatchmanWatcher.js:150:10)
at Client.emit (node:events:527:28)
at BunserBuf.<anonymous> (/Users/wjw/Documents/Projects22/reactNative/AwesomeProject/node_modules/fb-watchman/index.js:107:12)
at BunserBuf.emit (node:events:527:28)
at /Users/wjw/Documents/Projects22/reactNative/AwesomeProject/node_modules/bser/index.js:249:12
at processTicksAndRejections (node:internal/process/task_queues:78:11) {
watchmanResponse: {
error: 'std::__1::system_error: open: /Users/wjw/Documents/Projects22/reactNative/AwesomeProject: Operation not permitted',
version: '2022.06.06.00'
}
}
随后又开始按照提示,去git issue 查找方案:
GIT ISSUE
大概原因是 watchman 2022-05-30之后的版本都会有这个问题,我安装的时候版本为2022.06.06,需要暂时把watchman会退到之前的版本。
watchman shutdown-server # To ensure an old version isn't still running
brew uninstall watchman # Get rid of the buggy (e.g., 2022.05.30.00) version
curl https://raw.githubusercontent.com/Homebrew/homebrew-core/8651d8e23d308e564414188509f864e40548f514/Formula/watchman.rb > "$(brew --repository)/Library/Taps/homebrew/homebrew-core/Formula/watchman.rb"
brew install watchman # This installs the functioning 2022.05.16.00 version dowloaded above
brew pin watchman # Tell brew to leave this older version alone (don't forget to unpin once this problem is solved)
cd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula/
git checkout -- watchman.rb # To avoid brew showing warnings about having uncommitted git changes
以上操作完成之后:启动命令
npm run dev
watchman正常启动不再报错。
模拟器不再报红,不再报no bundle .... 找不到包的错。
标签:node,AwesomeProject,06,Users,28,watchman,React,版本,reactNative 来源: https://www.cnblogs.com/wjw-blog/p/16421423.html