react native安裝環(huán)境及使用vscode調(diào)試debug

React Native搭建環(huán)境：https://www.react-native.cn/docs/environment-setup
React Native基礎(chǔ)入門：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

一、安裝環(huán)境

brew install node
brew install watchman
npm install -g yarn
xcode-select --switch /Applications/Xcode.app/Contents/Developer/
參考：
【Homebrew】Mac安裝node報(bào)錯(cuò)
React Native 中文網(wǎng) 安裝環(huán)境

二、創(chuàng)建新項(xiàng)目

2.1.1 全新的項(xiàng)目
npx react-native init AwesomeProject
如果本地安裝的pod與rn默認(rèn)的不一致，會(huì)報(bào)錯(cuò)

Installing dependencies
? CocoaPods (https://cocoapods.org/) is not installed. CocoaPods is necessary for the iOS project to run correctly. Do you want to install it? ? Yes, with gem (may require sudo)
? Installing CocoaPods
? 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 ./Sample3/ios && pod install".
CocoaPods documentation: https://cocoapods.org/

使用跳過(guò)install即可
npx react-native init AwesomeProject --skip-install

2.1.2 如果已經(jīng)存在的項(xiàng)目，比如GitHub或內(nèi)網(wǎng)git上的上面，一般都沒(méi)有沒(méi)有node_modules文件夾，需要在主路徑（在package.json所在的文件夾路徑）所在的文件夾路徑里使用命令生成
npm install --force

2.3 進(jìn)入ios目錄，運(yùn)行pod
cd ios
bundle install
pod install

2.4 在主路徑（在package.json所在的文件夾路徑）里使用默認(rèn)的8081端口運(yùn)行
yarn ios
等同于：yarn ios --port=8081
等同于：react-native run-ios --port=8081
等同于：react-native run-ios
查看被占用的端口：lsof -i :8081
刪除指定pid的服務(wù)：kill pid數(shù)字

三、多項(xiàng)目同時(shí)運(yùn)行

如果同時(shí)運(yùn)行多個(gè)rn項(xiàng)目，每個(gè)rn項(xiàng)目都會(huì)有一個(gè)node服務(wù)器，第一個(gè)項(xiàng)目占用了默認(rèn)的8081端口后，其他項(xiàng)目就運(yùn)行不起來(lái)了,需要給后續(xù)的項(xiàng)目設(shè)置不同的端口

3.1臨時(shí)修改運(yùn)行端口:
yarn ios --port=8082
等同于：react-native run-ios --port=8082
然后再運(yùn)行項(xiàng)目
3.2 永久修改端口
項(xiàng)目下->package.json->scripts->"ios": "react-native run-ios --port=8083"
然后再運(yùn)行：yarn ios就會(huì)運(yùn)行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

配置指定版本的模擬器或真機(jī)
React-Native 使用真機(jī)和指定模擬器調(diào)試

查看模擬器和真機(jī)列表：
獲取模擬列表：xcrun simctl list devic
獲取真機(jī)和模擬列表 ：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配置指定的模擬器或真機(jī)
配置的調(diào)試開始文件位于項(xiàng)目路徑下: 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參數(shù)就是運(yùn)行默認(rèn)的
        },
        {
            "name": "Debug iPhone 12 mini",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            // 不寫runArguments參數(shù)就是運(yùn)行默認(rèn)的
            "runArguments": [
                "--simulator", // "真機(jī)就是`--device`"
                "iPhone 12 mini", // 對(duì)應(yīng)模擬器的名，不寫使用默認(rèn)的模擬器，只有需要指定某個(gè)固定模擬器才有這個(gè)配置
            ]
        },
        {
            "name": "Run 真機(jī)",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            // 不寫runArguments參數(shù)就是運(yùn)行默認(rèn)的
            "runArguments": [
                "--device", // "真機(jī)就是`--device`"
                //"aaaa的iPhone", // 對(duì)應(yīng)真機(jī)的名字（一般只有連接了多個(gè)真機(jī)才需要寫名字），不寫使用默認(rèn)的
            ]
        }
    ]
}

二、遇到問(wèn)題

==> 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沒(méi)安裝成功，命令安裝下
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

手動(dòng)安裝 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 報(bào)錯(cuò): 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

存在的項(xiàng)目，沒(méi)有node_modules文件夾的：npm install --force
React-Native(node_modules)

Mac 查看端口和進(jìn)程
查看對(duì)應(yīng)的端口號(hào)
lsof -i :8081
刪除對(duì)應(yīng)的端口號(hào)占用
kill pid的號(hào)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容