准备工作

RN文档：https://reactnative.cn/docs/environment-setup
以下用mycomputer代替自己电脑的名称

环境搭建

开发平台：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

未安装，执行brew install watchman安装
安装watchman报错：

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'

原因是国内镜像不可用（中科大、清华的都不行）。。。可能是文件没及时更新吧。把.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 环境变量：
cd ~进入主目录，没有.bash_profile文件就touch .bash_profile创建。有则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 进入编辑模式
编辑完了以后按 ESC 出编辑模式
输入 :w 保存文件,或者 :wq 保存文件并且退出vim
保存后输入source .bash_profile使文件生效。
echo $ANDROID_SDK_ROOT测试是否成功。

然后运行npx react-native init AwesomeProject，并确定安装react-native,
在Installing Bundler的时候报错，Your Ruby version is 2.6.8, but your Gemfile specified 2.7.5提示Ruby版本太低。
使用rvm升级并管理Ruby
参考：https://www.jianshu.com/p/e36c0a1c6b49、https://www.jianshu.com/p/e36c0a1c6b49、https://rvm.io/
先brew install gnupg gnupg2，
再ln -s /usr/local/bin/gpg /usr/local/bin/gpg2，//使用gpg2命令还需要创建symlink
再gpg2 --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB，提示：

gpg: 目录‘/Users/mycomputer/.gnupg’已创建
gpg: 钥匙箱‘/Users/mycomputer/.gnupg/pubring.kbx’已创建
gpg: 从公钥服务器接收失败：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，完成。
执行source /Users/mycomputer/.rvm/scripts/rvm后才能使用rvm命令。
测试rvm -v显示rvm 1.29.12 (latest)表示已经成功。

rvm install 2.7.5安装一个ruby版本，报错：

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.

重启终端后重试，报错：Failed to connect to rubygems.org port 443: Operation timed out
输入gem sources -l查看现在使用的源，显示https://rubygems.org/。
gem sources --remove https://rubygems.org/删除当前源，
gem sources --add https://gems.ruby-china.com/添加淘宝源
然后再rvm install 3.0.0安装3.0版本ruby，等了好久。。。
还是报错：

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.

执行echo "ruby_url=https://cache.ruby-china.com/pub/ruby" > ~/.rvm/user/db替换源，再次尝试install，安装成功。
rvm list查看，发现两个版本都在：

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

再去项目文件目录打开终端，尝试npx react-native init AwesomeProject，初始化完成。
yarn android编译成功。

如果要TypeScript的话，用npx react-native init AwesomeTSProject --template react-native-template-typescript
报错：

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时报错：Bundler::HTTPError Could not fetch specs from https://rubygems.org/
执行bundle config mirror.https://rubygems.org https://gems.ruby-china.com(参考https://gems.ruby-china.com/)
报错：

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安装成功。 参考https://www.jianshu.com/p/f43b5964f582、http://events.jianshu.io/p/412d760bcacd
在pod install时如果Installing DoubleConversion的时候卡住，并且报以下错误的时候：

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

可以参考https://www.jianshu.com/p/7b21254cbd77，也可以翻墙保证github这个链接可访问的情况下，重试几次。install别的也可能会出现好几次这个报错，重试就行。
installing hermes-engine要等很久，我报了好几次错，可以参考https://github.com/facebook/react-native/issues/31505，手动下载包，然后执行HERMES_ENGINE_TARBALL_PATH="/Users/henry/Downloads/hermes-runtime-darwin-v0.70.0.tar.gz" pod install --verbose
等pod install安装完成后，去项目文件执行yarn ios就可以跑ios项目了。

再init一个项目，就不会报错了，看到以下内容就是成功了

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.

第二阶段，编译运行

跑安卓命令：yarn android或npx react-native run-android
跑IOS命令：yarn ios或npx react-native run-ios
Metro窗口报错：

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 (??)是一个比较新的写法，这里识别不出来。
但这个问题的解决方案是这样的：1、先把ios/build文件夹删除，然后在项目上打开两个终端窗口。2、第一个窗口yarn start。3、第二个窗口yarn ios。
搞定。。。跑起来了，修改app.js测试，修改编译正常。

然后测试yarn android，报错：

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发现没有java jdk
去https://jdk.java.net/18/安装了一个18.0.2.1的java版本，解压包放到/Library/Java/JavaVirtualMachines/文件夹里。
然后重新yarn android等个十几分钟就跑起来了。
搞定！