React Native Mac环境安装记录

准备工作

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_profilevim .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 > [email protected]: 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 androidnpx react-native run-android
跑IOS命令:yarn iosnpx 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. (/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  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等个十几分钟就跑起来了。
搞定!

你可能感兴趣的:(React Native Mac环境安装记录)