準(zhǔn)備工作

RN文檔：https://reactnative.cn/docs/environment-setup
以下用mycomputer代替自己電腦的名稱

環(huán)境搭建

開發(fā)平臺(tái)：MacOS Monterey 12.2.1

安裝xcode

去https://developer.apple.com/download/all/?q=xcode安裝了xcode12.3.1，也可以appstore安裝最新的。xcode巨大！安裝包就要10G，裝完要占近20G。

檢查Homebrew

已安裝，版本3.2.3-59

檢查node

已有，版本12.10.0，但文檔要求14以上版本，使用nvm安裝了16.18.0版本nvm install 16.18.0

檢查yarn

已有，版本1.17.3

檢查watchman

未安裝，執(zhí)行brew install watchman安裝
安裝watchman報(bào)錯(cuò)：

tar: Error opening archive: Failed to open '/Users/mycomputer/Library/Caches/Homebrew/downloads/b5fb5dc2bc785f33cd57235cd47bbb354c2673048ecaa65a4dcac31f86f89d64--boost-1.76.0.big_sur.bottle.tar.gz'
Error: Failure while executing; `tar --extract --no-same-owner --file /Users/mycomputer/Library/Caches/Homebrew/downloads/b5fb5dc2bc785f33cd57235cd47bbb354c2673048ecaa65a4dcac31f86f89d64--boost-1.76.0.big_sur.bottle.tar.gz --directory /private/tmp/d20221025-88044-1vj4gjz` exited with 1. Here's the output:
tar: Error opening archive: Failed to open '/Users/mycomputer/Library/Caches/Homebrew/downloads/b5fb5dc2bc785f33cd57235cd47bbb354c2673048ecaa65a4dcac31f86f89d64--boost-1.76.0.big_sur.bottle.tar.gz'

原因是國內(nèi)鏡像不可用（中科大、清華的都不行）。。。可能是文件沒及時(shí)更新吧。把.bash_profile配置里的export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles/bottles #ckbrew鏡像去掉，改成 export HOMEBREW_BOTTLE_DOMAIN='' #ckbrew就沒問題了。。。

下載安裝 Android Studio，

配置 ANDROID_SDK_ROOT 環(huán)境變量：
cd ~進(jìn)入主目錄，沒有.bash_profile文件就touch .bash_profile創(chuàng)建。有則open -e .bash_profile或vim .bash_profile打開文件，輸入以下代碼

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

open -e .bash_profile 直接記事本打開編輯后保存
vim .bash_profile 輸入 i 進(jìn)入編輯模式
編輯完了以后按 ESC 出編輯模式
輸入 :w 保存文件,或者 :wq 保存文件并且退出vim
保存后輸入source .bash_profile使文件生效。
echo $ANDROID_SDK_ROOT測試是否成功。

然后運(yùn)行npx react-native init AwesomeProject，并確定安裝react-native,
在Installing Bundler的時(shí)候報(bào)錯(cuò)，Your Ruby version is 2.6.8, but your Gemfile specified 2.7.5提示Ruby版本太低。
使用rvm升級(jí)并管理Ruby
參考：http://www.itdecent.cn/p/e36c0a1c6b49、http://www.itdecent.cn/p/e36c0a1c6b49、https://rvm.io/
先brew install gnupg gnupg2，
再ln -s /usr/local/bin/gpg /usr/local/bin/gpg2，//使用gpg2命令還需要?jiǎng)?chuàng)建symlink
再gpg2 --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB，提示：

gpg: 目錄‘/Users/mycomputer/.gnupg’已創(chuàng)建
gpg: 鑰匙箱‘/Users/mycomputer/.gnupg/pubring.kbx’已創(chuàng)建
gpg: 從公鑰服務(wù)器接收失敗：Server indicated a failure

改成gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB 就可以了。

直接brew update把brew更新到了3.6.7
然后 \curl -sSL https://get.rvm.io | bash -s stable安裝rvm，完成。
執(zhí)行source /Users/mycomputer/.rvm/scripts/rvm后才能使用rvm命令。
測試rvm -v顯示rvm 1.29.12 (latest)表示已經(jīng)成功。

rvm install 2.7.5安裝一個(gè)ruby版本，報(bào)錯(cuò)：

curl: (56) LibreSSL SSL_read: Operation timed out, errno 60
There was an error(56).
Checking fallback: https://ftp.ruby-lang.org/pub/ruby/2.7/ruby-2.7.5.tar.bz2
No fallback URL could be found, try increasing timeout with:

    echo "export rvm_max_time_flag=20" >> ~/.rvmrc

There has been an error fetching the ruby interpreter. Halting the installation.

重啟終端后重試，報(bào)錯(cuò)：Failed to connect to rubygems.org port 443: Operation timed out
輸入gem sources -l查看現(xiàn)在使用的源，顯示https://rubygems.org/。
gem sources --remove https://rubygems.org/刪除當(dāng)前源，
gem sources --add https://gems.ruby-china.com/添加淘寶源
然后再rvm install 3.0.0安裝3.0版本ruby，等了好久。。。
還是報(bào)錯(cuò)：

There was an error(56).
Checking fallback: https://ftp.ruby-lang.org/pub/ruby/3.0/ruby-3.0.0.tar.gz
No fallback URL could be found, try increasing timeout with:

    echo "export rvm_max_time_flag=20" >> ~/.rvmrc

There has been an error fetching the ruby interpreter. Halting the installation.

執(zhí)行echo "ruby_url=https://cache.ruby-china.com/pub/ruby" > ~/.rvm/user/db替換源，再次嘗試install，安裝成功。
rvm list查看，發(fā)現(xiàn)兩個(gè)版本都在：

ruby-2.7.5 [ x86_64 ]
=* ruby-3.0.0 [ x86_64 ]

再去項(xiàng)目文件目錄打開終端，嘗試npx react-native init AwesomeProject，初始化完成。
yarn android編譯成功。

如果要TypeScript的話，用npx react-native init AwesomeTSProject --template react-native-template-typescript
報(bào)錯(cuò)：

warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
error An unexpected error occurred: "https://registry.yarnpkg.com/react-test-renderer: ESOCKETTIMEDOUT"

嘗試yarn config set registry https://registry.npm.taobao.org切換淘寶源
安裝Bundler時(shí)報(bào)錯(cuò)：Bundler::HTTPError Could not fetch specs from https://rubygems.org/
執(zhí)行bundle config mirror.https://rubygems.org https://gems.ruby-china.com(參考https://gems.ruby-china.com/)
報(bào)錯(cuò)：

warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.7.0/gems/cocoapods-core-1.11.3/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here: https://github.com/react-native-community/cli/blob/master/docs/configuration.md

gem sources --remove https://gems.ruby-china.com/、gem sources -a https://ruby.taobao.org/替換淘寶源
嘗試sudo gem install cocoapods直接安裝cocoapods
然后git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git ~/.cocoapods/repos/trunk，等很久，cocoapods安裝成功。 參考http://www.itdecent.cn/p/f43b5964f582、http://events.jianshu.io/p/412d760bcacd
在pod install時(shí)如果Installing DoubleConversion的時(shí)候卡住，并且報(bào)以下錯(cuò)誤的時(shí)候：

fatal: unable to access 'https://github.com/google/double-conversion.git/': Failed to connect to github.com port 443: Operation timed out

可以參考http://www.itdecent.cn/p/7b21254cbd77，也可以翻墻保證github這個(gè)鏈接可訪問的情況下，重試幾次。install別的也可能會(huì)出現(xiàn)好幾次這個(gè)報(bào)錯(cuò)，重試就行。
installing hermes-engine要等很久，我報(bào)了好幾次錯(cuò)，可以參考https://github.com/facebook/react-native/issues/31505，手動(dòng)下載包，然后執(zhí)行HERMES_ENGINE_TARBALL_PATH="/Users/henry/Downloads/hermes-runtime-darwin-v0.70.0.tar.gz" pod install --verbose
等pod install安裝完成后，去項(xiàng)目文件執(zhí)行yarn ios就可以跑ios項(xiàng)目了。

再init一個(gè)項(xiàng)目，就不會(huì)報(bào)錯(cuò)了，看到以下內(nèi)容就是成功了

Run instructions for Android:
    ? Have an Android emulator running (quickest way to get started), or a device connected.
    ? cd "/Users/mycomputer/Desktop/gyk/git/hgAppTsProject" && npx react-native run-android
  
  Run instructions for iOS:
    ? cd "/Users/mycomputer/Desktop/gyk/git/hgAppTsProject" && npx react-native run-ios
    - or -
    ? Open hgAppTsProject/ios/hgAppTsProject.xcworkspace in Xcode or run "xed -b ios"
    ? Hit the Run button
    
  Run instructions for macOS:
    ? See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.

第二階段，編譯運(yùn)行

跑安卓命令：yarn android或npx react-native run-android
跑IOS命令：yarn ios或npx react-native run-ios
Metro窗口報(bào)錯(cuò)：

Node found at: /usr/local/bin/node
/Users/mycomputer/Desktop/gyk/git/hgAppTsProject/node_modules/@react-native-community/cli/build/index.js:156
    cmd.option(opt.name, opt.description ?? '', opt.parse || (val => val), typeof opt.default === 'function' ? opt.default(rest[0]) : opt.default);
                                          ^

SyntaxError: Unexpected token ?
    at Module._compile (internal/modules/cjs/loader.js:749:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
    at Module.load (internal/modules/cjs/loader.js:672:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
    at Function.Module._load (internal/modules/cjs/loader.js:604:3)
    at Module.require (internal/modules/cjs/loader.js:711:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/mycomputer/Desktop/gyk/git/hgAppTsProject/node_modules/react-native/cli.js:13:11)
    at Module._compile (internal/modules/cjs/loader.js:805:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
Process terminated. Press <enter> to close the window

Nullish coalescing operator (??)是一個(gè)比較新的寫法，這里識(shí)別不出來。
但這個(gè)問題的解決方案是這樣的：1、先把ios/build文件夾刪除，然后在項(xiàng)目上打開兩個(gè)終端窗口。2、第一個(gè)窗口yarn start。3、第二個(gè)窗口yarn ios。
搞定。。。跑起來了，修改app.js測試，修改編譯正常。

然后測試yarn android，報(bào)錯(cuò)：

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.


    at makeError (/Users/guanyankai/Desktop/gyk/git/hgAppProject1/node_modules/execa/index.js:174:9)
    at /Users/guanyankai/Desktop/gyk/git/hgAppProject1/node_modules/execa/index.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOnAllDevices (/Users/guanyankai/Desktop/gyk/git/hgAppProject1/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:109:5)
    at async Command.handleAction (/Users/guanyankai/Desktop/gyk/git/hgAppProject1/node_modules/@react-native-community/cli/build/index.js:142:9)
info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.

終端java -v發(fā)現(xiàn)沒有java jdk
去https://jdk.java.net/18/安裝了一個(gè)18.0.2.1的java版本，解壓包放到/Library/Java/JavaVirtualMachines/文件夾里。
然后重新yarn android等個(gè)十幾分鐘就跑起來了。
搞定！