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 目錄,隨意修改代碼,在模擬器中可以實時看到修改的效果。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章