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報錯
React Native 中文網(wǎng) 安裝環(huán)境
二浪南、創(chuàng)建新項目
2.1.1 全新的項目
npx react-native init AwesomeProject
如果本地安裝的pod與rn默認的不一致，會報錯
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/
使用跳過install即可
npx react-native init AwesomeProject --skip-install
2.1.2 如果已經(jīng)存在的項目拥娄，比如GitHub或內(nèi)網(wǎng)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的服務(wù)：kill pid數(shù)字
三仓手、多項目同時運行
如果同時運行多個rn項目，每個rn項目都會有一個node服務(wù)器玻淑，第一個項目占用了默認的8081端口后嗽冒，其他項目就運行不起來了,需要給后續(xù)的項目設(shè)置不同的端口
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的端口了
VSCode-Debug
安裝插件：React Native Tools
選中Debug：
配置debug
https://www.react-native.cn/docs/debugging
yarn global add react-devtools
react-devtools
配置指定版本的模擬器或真機
React-Native 使用真機和指定模擬器調(diào)試
查看模擬器和真機列表：
獲取模擬列表：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配置指定的模擬器或真機
配置的調(diào)試開始文件位于項目路徑下: 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ù)就是運行默認的
},
{
"name": "Debug iPhone 12 mini",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "ios",
// 不寫runArguments參數(shù)就是運行默認的
"runArguments": [
"--simulator", // "真機就是`--device`"
"iPhone 12 mini", // 對應(yīng)模擬器的名，不寫使用默認的模擬器补履，只有需要指定某個固定模擬器才有這個配置
]
},
{
"name": "Run 真機",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "ios",
// 不寫runArguments參數(shù)就是運行默認的
"runArguments": [
"--device", // "真機就是`--device`"
//"aaaa的iPhone", // 對應(yīng)真機的名字（一般只有連接了多個真機才需要寫名字）酒甸，不寫使用默認的
]
}
]
}
二宽涌、遇到問題
==> 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
Runbundle installto 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 查看端口和進程
查看對應(yīng)的端口號
lsof -i :8081
刪除對應(yīng)的端口號占用
kill pid的號
