ReactNative环境安装

一、Homebrew

　　采用 Homebrew 镜像源及工具，切换到国内。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

　　

　　选择镜像源，执行命令。

$ brew --version
Homebrew 4.1.15

二、Node

　　我电脑本来是Node v16 版本，但是在后续执行 npx react-native init 命令时会报错。

　　所以需要升级到当前比较新的版本。

　　官网下载安装包，或者使用命令，npm 默认也会升级。

brew install node

三、Watchman

　　使用 Homebrew 来安装 watchman。

brew install watchman

　　安装成功后，执行命令。

watchman --version

四、Ruby

　　Mac 默认集成了 Ruby，不过版本比较低，我的是 2.6.8，需要升级。

　　使用 Homebrew 安装 rbenv。

brew install rbenv ruby-build

　　安装完成后，运行 init 命令，根据提示，使用 echo 将 init 命令添加到 Terminal 启动前。

　　以保障 Terminal 启动时，rbenv 会生效。

$ rbenv init
# Load rbenv automatically by appending
# the following to ~/.bash_profile:

eval "$(rbenv init - bash)"
$ echo 'eval "$(rbenv init - bash)"' >> ~/.bash_profile

　　命令执行完成后，重启 Terminal，安装并切换到 React Native 所依赖的 Ruby 版本。

rbenv install 3.2.2
rbenv global 3.2.2

　　切换完成 Ruby 版本后，再次重启 Terminal，再次运行 ruby --version 命令，确定 Ruby 版本是否切换成功。

$ ruby --version
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-darwin21]

五、Gem 和 Bundler

　　切换 Ruby 包管理工具的镜像源。

　　切换 Gem 镜像源的方法是通过 gem sources 命令进行切换。

$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.com

　　切换 Bundler 镜像源的方法是通过设置 config 进行切换。

bundle config mirror.https://rubygems.org https://gems.ruby-china.com

六、Xcode

　　安装 Xcode 有两种方法：

1. 从 Mac App Store 中进行安装
2. 从开发者中心进行下载和安装

　　在 App Store 安装时，提示我的操作系统版本过低需要升级。

　　所以就选择了第二种安装方式，选了个符合我当前系统的 Xcode 版本。

　　

　　安装时，勾选默认选项即可。

　　

　　默认项安装完成后，找到左上角的 Xcode 标识，点击 Preferences。

　　

　　找到 Locations 标签中的 Command Line Tools 一栏，选择对应的 Xcode。

　　

七、CocoaPods

　　CocoaPods 是另一种包管理工具，它虽然是用 Ruby 编写的，但不是 Ruby 的包管理工具，而是 iOS 的包管理工具。

　　借助 Gem 来安装 CocoaPods。

sudo gem install cocoapods

　　安装完成后，运行如下命令确定 CocoaPods 是否已经安装成功。

pod --version

　　遇到个奇怪的错误。

/usr/local/lib/ruby/gems/3.2.0/gems/activesupport-7.1.0/lib/active_support/core_ext/array/conversions.rb:108:in `<class:Array>': undefined method `deprecator' for ActiveSupport:Module (NoMethodError)

  deprecate to_default_s: :to_s, deprecator: ActiveSupport.deprecator
                                                          ^^^^^^^^^^^
Did you mean?  deprecate_constant
        from /usr/local/lib/ruby/gems/3.2.0/gems/activesupport-7.1.0/lib/active_support/core_ext/array/conversions.rb:8:in `<top (required)>'
        from <internal:/usr/local/lib/ruby/site_ruby/3.2.0/rubygems/core_ext/kernel_require.rb>:86:in `require'
        from <internal:/usr/local/lib/ruby/site_ruby/3.2.0/rubygems/core_ext/kernel_require.rb>:86:in `require'
        from /usr/local/lib/ruby/gems/3.2.0/gems/cocoapods-1.13.0/lib/cocoapods.rb:9:in `<top (required)>'
        from <internal:/usr/local/lib/ruby/site_ruby/3.2.0/rubygems/core_ext/kernel_require.rb>:86:in `require'
        from <internal:/usr/local/lib/ruby/site_ruby/3.2.0/rubygems/core_ext/kernel_require.rb>:86:in `require'
        from /usr/local/lib/ruby/gems/3.2.0/gems/cocoapods-1.13.0/bin/pod:36:in `<top (required)>'
        from /usr/local/bin/pod:25:in `load'
        from /usr/local/bin/pod:25:in `<main>'

　　一顿搜索后，发现需要指定 activesupport 的版本。

sudo gem uninstall activesupport
sudo gem install activesupport --version 7.0.8

八、新建项目

　　使用 React Native 内建的命令行工具来创建一个名为 AwesomeProject 的新项目（记得更新 Node 版本）。

$ npx react-native@latest init AwesomeProject

                  Welcome to React Native!
                 Learn once, write anywhere

 Downloading template
 Copying template
 Processing template
 Installing Ruby Gems
 Installing CocoaPods dependencies (this may take a few minutes)
error bundler: failed to load command: pod (/Users/pwstrick/code/rnative/AwesomeProject/vendor/bundle/ruby/3.2.0/bin/pod)
/Users/pwstrick/code/rnative/AwesomeProject/vendor/bundle/ruby/3.2.0/gems/activesupport-7.1.0/lib/active_support/core_ext/array/conversions.rb:108:in `<class:Array>': undefined method `deprecator' for ActiveSupport:Module (NoMethodError)

  deprecate to_default_s: :to_s, deprecator: ActiveSupport.deprecator

　　安装的过程中，又遇到了之前的一个问题，还是在刚刚 issue 中找到了解决方案。

　　进入到 AwesomeProject 目录，给 Gemfile 文件增加一条命令。

gem 'activesupport', '~> 7.0.8' 

　　然后按照步骤进行处理。

• cd iOS 打开 iOS 目录
• bundle install 安装 Bundler
• bundle update activesupport 更新支持的版本
• bundle exec pod install 安装 CocoaPods 管理的 iOS 依赖项

　　安装时还是会报错，无法访问 Github 中的一个仓库，跟你的网络有关，多试几次或者全局开下代理。

Downloading dependencies
Installing CocoaAsyncSocket (7.6.5)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.72.5)
Installing FBReactNativeSpec (0.72.5)
Installing Flipper (0.182.0)
Installing Flipper-Boost-iOSX (1.76.0.1.11)

[!] Error installing Flipper-Boost-iOSX
[!] /usr/local/bin/git clone https://github.com/priteshrnandgaonkar/Flipper-Boost-iOSX.git /var/folders/6d/ly3gds1x7z160v9kqdxxdkfm0000gn/T/d20231011-86229-gl8gee --template= --single-branch --depth 1 --branch 1.76.0.1.11

Cloning into '/var/folders/6d/ly3gds1x7z160v9kqdxxdkfm0000gn/T/d20231011-86229-gl8gee'...
fatal: unable to access 'https://github.com/priteshrnandgaonkar/Flipper-Boost-iOSX.git/': LibreSSL SSL_read: error:02FFF03C:system library:func(4095):Operation timed out, errno 60

　　最后，将所有依赖安装成功。

Generating Pods project
Setting REACT_NATIVE build settings
Setting CLANG_CXX_LANGUAGE_STANDARD to c++17 on /Users/pwstrick/code/rnative/AwesomeProject/ios/AwesomeProject.xcodeproj
Pod install took 25 [s] to run
Integrating client project

[!] Please close any current Xcode sessions and use `AwesomeProject.xcworkspace` for this project from now on.
Pod installation complete! There are 63 dependencies from the Podfile and 53 total pods installed.

[!] Do not use "pod install" from inside Rosetta2 (x86_64 emulation on arm64).

[!]  - Emulated x86_64 is slower than native arm64

[!]  - May result in mixed architectures in rubygems (eg: ffi_c.bundle files may be x86_64 with an arm64 interpreter)

[!] Run "env /usr/bin/arch -arm64 /bin/bash --login" then try again.

九、启动项目

　　在创建了一个名为 AwesomeProject 的新项目后，进入该项目目录，运行如下命令来启动 iOS 项目。

$ npx react-native run-ios
info Found Xcode workspace "AwesomeProject.xcworkspace"
info No booted devices or simulators found. Launching first available simulator...
info Launching iPhone SE (3rd generation) (iOS 16.0)
info Building (using "xcodebuild -workspace AwesomeProject.xcworkspace -configuration Debug -scheme AwesomeProject -destination id=5C7ACFB7-2A39-4814-8BBD-9E4ED2E1D4A4")
⠼ Building the app..

　　经过几分钟的编译后，在模拟器中就能得到 App 的界面，机型可自行选择。

　　

　　用 VS Code 打开 AwesomeProject 目录，随意修改代码，在模拟器中可以实时看到修改的效果。