React Native环境搭建踩坑记录（2022/06/28-RN version:0.68.0）

RN开发环境的搭建十分苛刻，官方建议不要使用简易沙盒环境，所以国内用户最好还是搭建完整的环境。
由于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！），需要手动配置这数字，解除限制：

watchman 官网

需要做的就是以下两个命令：

$ 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 .... 找不到包的错。

posted @ 2022-06-28 23:12  wjwdive  阅读(1923)  评论(1)  编辑  收藏  举报