簡要:本系列文章講會對expo進行全面的介紹,本人從2017年6月份接觸expo以來,對expo的研究斷斷續續,一路走來將近10個月,廢話不多說,接下來你看到內容,講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式,對expo進行一次大補血!歡迎加入expo興趣學習交流群:597732 ...
簡要:本系列文章講會對expo進行全面的介紹,本人從2017年6月份接觸expo以來,對expo的研究斷斷續續,一路走來將近10個月,廢話不多說,接下來你看到內容,講全部來與官網
我猜去全部機翻+個人修改補充+demo測試的形式,對expo進行一次大補血!歡迎加入expo興趣學習交流群:597732981
【之前我寫過一些列關於expo和rn入門配置的東i西,大家可以點擊這裡查看:從零學習rn開發】
相關文章:
Expo大作戰(一)--什麼是expo,如何安裝expo clinet和xde,xde如何使用
Expo大作戰(二)--expo的生命周期,expo社區交流方式,expo學習必備資源,開發使用expo時關註的一些問題
Expo大作戰(三)--針對已經開發過react native項目開發人員有針對性的介紹了expo,expo的局限性,開發時項目選型註意點等
Expo大作戰(四)--快速用expo構建一個app,expo中的關鍵術語
Expo大作戰(五)--expo中app.json 文件的配置信息
Expo大作戰(六)--expo開發模式,expo中exp命令行工具,expo中如何查看日誌log,expo中的調試方式
Expo大作戰(七)--expo如何使用Genymotion模擬器
Expo大作戰(八)--expo中的publish以及expo中的link,對link這塊東西沒有詳細看,大家可以來和我交流
接下來就開始擼碼
用ExpoKit開發
ExpoKit是一個Objective-C和Java庫,允許您使用本地iOS / Android項目的expo平臺。
在閱讀本指南之前
有兩種方法可以獲得ExpoKit項目:
- 在XDE中創建一個純JS項目,然後使用exp detach添加ExpoKit。
- 使用create-react-native-app創建應用程式,然後選擇“eject with ExpoKi”。
在繼續閱讀本指南之前,請確保遵循上述路徑之一。本指南的其餘部分將假設您已經創建了一個ExpoKit項目。
設置您的項目(setting up your project)
到此為止,您應該有一個JS應用程式,其中還包含ios和android目錄。
1.檢查JS依賴關係
你的項目的package.json應該包含一個指向Expo fork Native分支的react-native依賴項。這應該已經配置好了。
您的JS依賴關係應該已經安裝(通過npm install或yarn)。
2.在XDE或exp中運行項目
在XDE中打開項目。如果您已經在XDE中運行此項目,請按重新啟動。
如果你喜歡exp,從項目目錄運行exp start。
這一步確保React Native打包程式正在運行併為您的應用程式的JS包提供開發服務。保持這種運行狀態並繼續執行以下步驟。
3. iOS:配置,構建和運行(iOS: Configure, build and run)
這一步確保本地iOS項目被正確配置並準備開發。
- 確保你有最新的Xcode。
- 如果您還沒有安裝,請安裝CocoaPods,它是iOS的本地依賴管理器。
- 從項目的ios目錄運行pod install。
- 在Xcode中打開項目的xcworkspace文件。
- 使用Xcode在您的測試設備或模擬器上構建,安裝和運行項目。 (如果您點擊Xcode中的大“播放”按鈕,預設情況下會發生這種情況。)
一旦它運行,iOS應用程式就會自動從您從XDE或exp提供的項目中請求您的JS包。
4. Android:構建並運行
在Android Studio中打開android目錄,然後在Android設備或Genymotion模擬器上構建並運行該項目。
打開項目時,Android Studio可能會提示您升級Gradle或其他構建工具的版本,但不要這樣做,因為您可能會收到意想不到的結果。 ExpoKit總是附帶所有構建工具的最新支持版本。
一旦Android項目正在運行,它應該自動從XDE或exp請求您的開髮網址。你可以從這裡正常開發你的項目。
繼續部署
每次開發時,都要確保項目的JS由XDE提供服務(步驟2),然後分別從Xcode或Android Studio運行本機代碼。
您的ExpoKit項目被配置為在您構建發佈的網址時載入您的應用的發佈網址(Your ExpoKit project is configured to load your app’s published url when you build it for r)。所以當你想發佈它時,不要忘記發佈,就像任何正常的(非ExpoKit)項目一樣。
改變本地依賴(Changing Native Dependencies)
iOS版
您的ExpoKit項目使用CocoaPods管理其依賴關係。
React Native生態系統中的許多庫都包含運行react-native link 的說明。這些支持iOS的ExpoKit。
如果庫支持CocoaPods(具有.podspec文件),只需按照正常的說明並運行react-native link 即可。
如果庫不支持CocoaPods,react-native鏈接可能無法包含庫的頭文件。如果您遇到構建問題(查找<React / *>標題),則可能需要手動將Pods / Headers / Public添加到您在Xcode中的本機依賴項的Header Search Paths配置。如果您不熟悉Xcode,那麼搜索Xcode可以幫助您“配置構建設置”以瞭解這些工作方式。標題搜索路徑就是這樣一個構建設置。您關心配置的目標是由您的Xcode項目內的react-native鏈接創建的目標。您需要確定從庫到Pods / Headers / Public的相對路徑。
Android版
React Native生態系統中的許多庫都包含運行react-native link 的說明。這些支持與Android的ExpoKit。
升級ExpoKit
ExpoKit的發佈周期遵循Expo SDK發佈周期。當新版本的Expo SDK發佈時,發行說明中包含了針對項目正常的僅JS部分的升級說明。此外,您需要更新本機ExpoKit代碼。
註意:在繼續下麵的指示之前,請確保你已經更新了你的JS依賴關係。此外,這裡可能會涉及版本特定的重大更改。
iOS版
- 在您的項目中打開ios / Podfile,並更新ExpoKit標記以指向與您的SDK版本相對應的版本。重新運行pod安裝。
- 在項目中打開ios / your-project / Supporting / EXSDKVersions.plist,並將所有值更改為新的SDK版本。
Android版
- 轉到https://expo.io/-/api/v2/versions併在sdkVersions下找到androidExpoViewUrl鍵[NEW SDK VERSION]。
- 下載.tar.gz文件並將其解壓。
- 轉到您項目的.expo-source / android目錄,並用您下載的文件替換為android目錄。
- 轉到MainActivity.java並用Arrays.asList(“[NEW SDK VERSION]”)替換Arrays.asList(“[舊SDK版本]”)。
- 轉到build.gradle並替換compile('host.exp.exponent:expoview:[OLD SDK VERSION] @aar'){with compile('host.exp.exponent:expoview:[NEW SDK VERSION] @aar'){ 。
下一張繼續介紹,這一篇主要介紹了:到最後我已經不知道他在說什麼了,配置這些東西,最好就是親自試一試,歡迎大家關註我的微信公眾號,這篇文章是否被大家認可,我的衡量標準就是公
眾號粉絲增長人數。歡迎大家轉載,但必須保留本人博客鏈接!