背景

準(zhǔn)備將之前的一個(gè)React Native應(yīng)用部署到iOS上，于是開始了探索之旅。
一下子就牽扯出了Ruby，CocoaPods，Expo等新事物，雖然我很早以前搞過Ruby，但早就放棄了，沒想到今天還得重新裝一把ruby, gems。

React Native本身代碼不難寫，但打包部署似乎比開發(fā)程序還麻煩，當(dāng)然打包部署是一錘子買賣。
涉及工具：Ruby, Node, CocoaPods, npx, yarn, react native, expo

環(huán)境準(zhǔn)備

調(diào)查研究表明，搭建各種軟件環(huán)境占據(jù)程序員四分之一的時(shí)間。

主要工具

先安裝nvm，再安裝node。我安裝的是v20.11.0。

npx是一個(gè)由Node.js官方提供的用于快速執(zhí)行npm包中的可執(zhí)行文件的工具。它可以幫助我們?cè)诓蝗职惭b某些包的情況下，直接運(yùn)行該包提供的命令行工具。npx會(huì)在執(zhí)行時(shí)，檢查本地項(xiàng)目中是否安裝了對(duì)應(yīng)的依賴，如果沒有安裝則會(huì)自動(dòng)下載安裝，并執(zhí)行命令。如果本地已經(jīng)存在該依賴，則直接執(zhí)行命令。

查看幾個(gè)主要工具的版本：

## expo版本
npx expo -v
0.17.5
## create-expo-app版本
create-expo-app -v
2.1.1
## react-native版本
react-native -v
react-native-cli: 2.0.1
react-native: 0.73.4
## pod 版本
pod --version
1.15.2

xcode安裝

brew -v
xcodebuild -version
xcrun swift -version
swift --version

安裝CocoaPods

CocoaPods是開發(fā)iOS項(xiàng)目的庫管理工具。它擁有超過55,000個(gè)庫，并在超過300萬個(gè)應(yīng)用程序中使用。通過CocoaPods可以幫助我們優(yōu)雅地?cái)U(kuò)展項(xiàng)目，便捷的導(dǎo)入第三方開源庫。

cocoapod 是用ruby寫的。在工程文件里執(zhí)行 pod init 會(huì)生成Podfile文件，通過Podfile文件來下載依賴的庫。所以少不了和ruby打交道。

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. It has over 98 thousand libraries and is used in over 3 million apps. CocoaPods can help you scale your projects elegantly.

安裝步驟：

## 先安裝rvm和ruby
brew install gnupg 
gpg --keyserver hkp://pgp.mit.edu --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
curl -sSL https://get.rvm.io | bash -s stable --ruby## 查看rvm版本：
rvm -v
## 查看現(xiàn)在使用RVM管理的Ruby版本：
which rvm
##列出可供RVM使用的Ruby版本：
rvm list
## 列出可安裝的版本：
rvm list known

設(shè)置代理：

git config --global http.proxy socks5://127.0.0.1:1080
git config --global https.proxy socks5://127.0.0.1:1080
sudo killall -HUP mDNSResponder  ## 刷新本地環(huán)境
#取消代理的方式
git config --global --unset http.proxy
git config --global --unset http.https://github.com.proxy

這樣，執(zhí)行pod install 和 pod update速度都會(huì)變快
更換gem源和pod源：

gem sources l ## 查看當(dāng)前源
gem sources --remove https://rubygems.org/
gem sources -a https://mirrors.aliyun.com/rubygems/  ## 添加新阿里巴巴gem鏡像
## 在Podfile里添加
source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

基本步驟

基本命令：

create-expo-app <項(xiàng)目名稱>  ## 創(chuàng)建一個(gè)expo項(xiàng)目
npx expo prebuild ## 創(chuàng)建iOS或android目錄
npx expo run:ios ## 創(chuàng)建目錄，且編譯
npx expo run:ios --configuration Release

修改Podfile, 增加下面行：

use_frameworks!
#use_modular_headers!
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec', :modular_headers => false
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false
#pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec', :modular_headers => false
pod 'RCT-Folly', :podspec => '../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec', :modular_headers => false
#pod 'RCT-Folly.default-Fabric-Futures', :podspec => '', :modular_headers => false
pod 'boost', :podspec => '../node_modules/react-native/third-party-podspecs/boost.podspec', :modular_headers => false
# pod 'React-utils', :podspec => '../node_modules/react-native/ReactCommon/react/utils/React-utils.podspec', :modular_headers => false
# pod 'React-Mapbuffer', :podspec => '../node_modules/react-native/ReactCommon/React-Mapbuffer.podspec', :modular_headers => false

采用Expo go運(yùn)行

如果采用Expo go托管測(cè)試，則運(yùn)行yarn expo start，然后用iPhone的掃碼器掃一下二維碼，就可以安裝在真機(jī)上運(yùn)行了。這種方式僅用于開發(fā)階段。

iOS模擬器運(yùn)行

執(zhí)行npx expo run:ios后正常運(yùn)行起來后的樣子：
這種方式可以用于應(yīng)用的開發(fā)測(cè)試。
也可以通過xcode啟動(dòng)模擬器，如果沒有編譯錯(cuò)誤，就能啟動(dòng)模擬器，運(yùn)行你的app：

安裝在真機(jī)上測(cè)試

如果要部署到真機(jī)上測(cè)試，可以用xcode打開ios目錄下的xcworkspace工程文件，然后點(diǎn)運(yùn)行即可。設(shè)備里選你的真機(jī)，就會(huì)跑在真機(jī)上。這種方式只需要有Apple ID并創(chuàng)建測(cè)試證書即可。

發(fā)布到蘋果商店

采用Expo提供的EAS工具就可以發(fā)布到App Store?；静襟E如下：

npm install -g eas-cli ## 安裝eas命令行工具
eas build:configure ## 配置你的項(xiàng)目
eas build --platform ios ## 構(gòu)建你的app
eas submit -p ios  ## 提交到Apple store

常見問題

ruby3在macOS上編譯失敗

一般多為openssl版本問題導(dǎo)致，重新安裝一下：

brew reinstall openssl@3
rvm install ruby-3.2.2 --reconfigure --enable-yjit --with-openssl-dir=$(brew --prefix openssl@3)

import of module ‘glog.glog.log_severity’ appears within namespace ‘google’

pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec', :modular_headers => false
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec', :modular_headers => false

yarn網(wǎng)絡(luò)問題

yarn config delete proxy
npm config rm proxy
npm config rm https-proxy
yarn config set registry https://registry.npm.taobao.org
yarn install --network-timeout 6000 ## 毫秒

pod安裝失敗

The Swift pod `ExpoModulesCore` depends upon `glog`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.

根據(jù)上面提示，修改Pofile文件，添加use_modular_headers!，或者為某個(gè)依賴指定:modular_headers => true

use_modular_headers!
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec', :modular_headers => false
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => true
pod 'RCT-Folly', :podspec => '../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec', :modular_headers => true
pod 'boost', :podspec => '../node_modules/react-native/third-party-podspecs/boost.podspec', :modular_headers => false

unable to open settings file

Showing Recent Messages
/Users/XX/Desktop/XX/Pods/Target Support Files/Pods-XX/Pods-XX.debug.xcconfig: unable to open file (in target "XX" in project "XX")

解決方法：

sudo gem install cocoapods --pre
或者   sudo gem install -n /usr/local/bin cocoapods --pre
再：
pod install
pod update（pod install 不行再執(zhí)行）

xcode運(yùn)行報(bào)Undefined symbol: OBJC_CLASS$_RCTImageLoader

TODO

Unable to resolve “missing-asset-registry-path” from

啟動(dòng)metro服務(wù)器后，運(yùn)行app，報(bào)錯(cuò)：

Unable to resolve "missing-asset-registry-path" from  "node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf"

升級(jí)react-native-vector-icons到最新版就解決了，metro水太深。

相關(guān)鏈接

• The New Expo CLI
• cocoapods
• swift下載
• swiftenv
• 2023年最新蘋果AppleiOS開發(fā)證書申請(qǐng)創(chuàng)建App詳細(xì)圖文流程