准备工作
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 > [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 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. (/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
等个十几分钟就跑起来了。
搞定!