react native安装环境及使用vscode调试debug

React Native搭建环境：https://www.react-native.cn/docs/environment-setup
React Native基础入门：https://www.react-native.cn/docs/getting-started
深入 JSX：https://zh-hans.reactjs.org/docs/jsx-in-depth.html#gatsby-focus-wrapper
React：https://zh-hans.reactjs.org/
https://reactnative.dev/docs/debugging

---

一、安装环境

brew install node
brew install watchman
npm install -g yarn
xcode-select --switch /Applications/Xcode.app/Contents/Developer/
参考：
【Homebrew】Mac安装node报错
React Native 中文网 安装环境

二、创建新项目

2.1.1 全新的项目
npx react-native init AwesomeProject

2.1.2 如果已经存在的项目，比如GitHub或内网git上的上面，一般都没有没有node_modules文件夹，需要在主路径（在package.json所在的文件夹路径）所在的文件夹路径里使用命令生成
npm install --force

2.3 进入ios目录，运行pod
cd ios
bundle install
pod install

2.4 在主路径（在package.json所在的文件夹路径）里使用默认的8081端口运行
yarn ios
等同于：yarn ios --port=8081
等同于：react-native run-ios --port=8081
等同于：react-native run-ios
查看被占用的端口：lsof -i :8081
删除指定pid的服务：kill pid数字

---

三、多项目同时运行

如果同时运行多个rn项目，每个rn项目都会有一个node服务器，第一个项目占用了默认的8081端口后，其他项目就运行不起来了,需要给后续的项目设置不同的端口

3.1临时修改运行端口:
yarn ios --port=8082
等同于：react-native run-ios --port=8082
然后再运行项目
3.2 永久修改端口
项目下->package.json->scripts->"ios": "react-native run-ios --port=8083"
然后再运行：yarn ios就会运行8083的端口了

port.png

VSCode-Debug
安装插件：React Native Tools
选中Debug：

rn_debug_0.png rn_debug_1.png rn_debug_2.png

配置debug
https://www.react-native.cn/docs/debugging
yarn global add react-devtools
react-devtools

配置指定版本的模拟器或真机
React-Native 使用真机和指定模拟器调试

查看模拟器和真机列表：
获取模拟列表：xcrun simctl list devic
获取真机和模拟列表 ：xcrun xctrace list devices

xcrun xctrace list devices
== Devices ==
aaa iMac (xxx-xx-xxx-xxx-xxx)
aaa的iPhone (15.3.1) (xxxx-xxxx)

== Simulators ==

Apple TV Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
Apple TV 4K (2nd generation) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
Apple TV 4K (at 1080p) (2nd generation) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPad (9th generation) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPad Air (5th generation) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPad Pro (11-inch) (3rd generation) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPad Pro (12.9-inch) (5th generation) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPad Pro (9.7-inch) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPad mini (6th generation) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 11 Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 11 Pro Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 11 Pro Max Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 12 Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 12 Pro Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 12 Pro Simulator (15.4) + Apple Watch Series 5 - 40mm (8.5) (xxx-xx-xxx-xxx-xxx)
iPhone 12 Pro Max Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 12 Pro Max Simulator (15.4) + Apple Watch Series 5 - 44mm (8.5) (xxx-xx-xxx-xxx-xxx)
iPhone 12 mini Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 13 Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 13 Simulator (15.4) + Apple Watch Series 7 - 45mm (8.5) (xxx-xx-xxx-xxx-xxx)
iPhone 13 Pro Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 13 Pro Simulator (15.4) + Apple Watch Series 6 - 40mm (8.5) (xxx-xx-xxx-xxx-xxx)
iPhone 13 Pro Max Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 13 Pro Max Simulator (15.4) + Apple Watch Series 6 - 44mm (8.5) (xxx-xx-xxx-xxx-xxx)
iPhone 13 mini Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 13 mini Simulator (15.4) + Apple Watch Series 7 - 41mm (8.5) (xxx-xx-xxx-xxx-xxx)
iPhone 8 Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone 8 Plus Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPhone SE (3rd generation) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)
iPod touch (7th generation) Simulator (15.4) (xxx-xx-xxx-xxx-xxx)

使用runArguments配置指定的模拟器或真机
配置的调试开始文件位于项目路径下: xxx/.vscode/launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug iOS",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            // 不写runArguments参数就是运行默认的
        },
        {
            "name": "Debug iPhone 12 mini",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            // 不写runArguments参数就是运行默认的
            "runArguments": [
                "--simulator", // "真机就是`--device`"
                "iPhone 12 mini", // 对应模拟器的名，不写使用默认的模拟器，只有需要指定某个固定模拟器才有这个配置
            ]
        },
        {
            "name": "Run 真机",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            // 不写runArguments参数就是运行默认的
            "runArguments": [
                "--device", // "真机就是`--device`"
                //"aaaa的iPhone", // 对应真机的名字（一般只有连接了多个真机才需要写名字），不写使用默认的
            ]
        }
    ]
}

---

二、遇到问题

==> Installing dependencies for node: icu4c, libnghttp2 and libuv
==> Installing node dependency: icu4c
==> Pouring icu4c-69.1.monterey.bottle.tar.gz
Error: No such file or directory @ rb_sysopen - /Users/xxx/Library/Caches/Homebrew/downloads/048f0b707abd0b1d6047b4a64f7a58f52d6c9d41447508c5fbf85c71e2cb052f--icu4c-69.1.monterey.bottle.tar.gz

这里是icu4c没安装成功，命令安装下
brew install icu4c

==> Installing dependencies for node: libnghttp2
==> Installing node dependency: libnghttp2
==> Pouring libnghttp2-1.46.0.monterey.bottle.tar.gz
Error: No such file or directory @ rb_sysopen - /Users/aaa/Library/Caches/Homebrew/downloads/418b0967ba69602e95d0994dced17956cdbbbb12c7d3c146d2ca7734ea06bd42--libnghttp2-1.46.0.monterey.bottle.tar.gz

手动安装 brew install libnghttp2

然后再安装brew install node

2、

Error: python@3.10: the bottle needs the Apple Command Line Tools to be installed.
You can install them, if desired, with:
xcode-select --install

3

✖ 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.

4

Warning: the running version of Bundler (2.1.4) is older than the version that created the lockfile (2.2.27). We suggest you to upgrade to the version that created the lockfile by running gem install bundler:2.2.27.
Traceback (most recent call last):
4: from /Users/aaa/.rvm/rubies/ruby-2.7.4/bin/ruby_executable_hooks:22:in <main>' 3: from /Users/aaa/.rvm/rubies/ruby-2.7.4/bin/ruby_executable_hooks:22:ineval'
2: from /usr/local/bin/pod:23:in <main>' 1: from /Users/aaa/.rvm/rubies/ruby-2.7.4/lib/ruby/2.7.0/rubygems.rb:296:inactivate_bin_path'
/Users/aaa/.rvm/rubies/ruby-2.7.4/lib/ruby/2.7.0/rubygems.rb:277:in `find_spec_for_exe': can't find gem cocoapods (>= 0.a) with executable pod (Gem::GemNotFoundException)

5

can't find gem cocoapods (>= 0.a) with executable pod (Gem::GemNotFoundException)

pod install 报错: can't find gem cocoapods (>= 0.a) with executable pod (Gem::GemNotFoundException)

6

Could not find proper version of cocoapods (1.11.3) in any of the sources
Run bundle install to install missing gems.

bundle install

/bin/sh: react-native: command not found

npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: qieziProject@0.0.1
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8" from @react-native-community/async-storage@1.12.1
npm ERR! node_modules/@react-native-community/async-storage
npm ERR! @react-native-community/async-storage@"^1.12.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps

存在的项目，没有node_modules文件夹的：npm install --force
React-Native(node_modules)

Mac 查看端口和进程
查看对应的端口号
lsof -i :8081
删除对应的端口号占用
kill pid的号