簡要：本系列文章講會對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這塊東西沒有詳細看，大家可以來和我交流

更多>>

接下來就開始擼碼

---

指南

這些指南涵蓋了您可能希望在Expo項目中實施的具體目標或功能。 例如，許多人希望加載除設備附帶的字體外的自定義字體，或向用戶發送推送通知。 閱讀適合您需求的指南。

App圖標

您的應用圖標是用戶在其設備的主屏幕以及App Store和Play商店中看到的圖標。這是平臺差異很重要的一個主題，並且要求可能很嚴格。本指南詳細介紹了如何確保您的應用圖標在所有設備上看起來盡可能好。

配置您的應用程序的圖標

為您的應用程序提供圖標最直接的方法是在app.json中提供圖標鍵。如果你想盡可能做到最小，那麽這個關鍵就足夠了。但是，Expo還接受ios.icon和android.icon下的平臺特定鍵。如果其中任何一個存在，他們將優先於各自平臺上的基本圖標鍵。大多數產品質量的應用程序可能會提供iOS和Android之間略有不同的東西。

圖標最佳實踐

iOS版
您用於iOS的圖標應該遵循iOS圖標的Apple人機界面指南。

• 使用一個PNG文件。
• 1024x1024是一個很好的尺寸。expo建設服務將為您生成其他尺寸。它生成的最大尺寸是1024x1024。
• 圖標必須完全正方形，即1023x1024圖標無效。
• 確保圖標填充整個正方形，沒有圓角或其他透明像素。適當時，操作系統將掩蓋您的圖標。

Android的
與iOS不同，操作系統不會將您的圖標蒙上任何特定的形狀。因此，您可能希望使用透明度來提供除正方形以外的其他形狀。

• 使用一個PNG文件。
• 您可能仍然希望遵循Apple的一些最佳做法，以確保您的圖標看起來很專業，例如在不同的壁紙上測試您的圖標，並避免除產品的文字標記之外的文字。
• 提供至少512x512像素的東西。既然你已經在iOS上需要1024x1024，那麽在這裏也只是提供這個東西也不會有什麽壞處。

expo客戶和網絡（Expo Client and Web）

如果您的應用程序包含隱私：在app.json中公開，它會顯示在您的expo.io配置文件中。在這種情況下，我們會掩蓋自己的圖標以獲得圓角，所以如果它在iOS上看起來合理，它在這裏也可能看起來不錯。

資產（Assets）

圖像，字體，視頻，聲音，您的應用依賴的任何其他文件並不是JavaScript，而是被認為是一種資產。就像在網絡上一樣，資產也可以通過HTTP按需獲取或流式傳輸。這與典型的移動應用程序不同，資產與應用程序二進制文件捆綁在一起。

然而，Expo在您使用的資源與需要的語法之間存在著區別，因為它們在本地文件系統上可用，例如：<Image source = {require（‘./ assets / images / example.png‘ ）} />以及您通過網址引用的網頁圖片，例如：<Image source = {{uri：‘http://yourwebsite.com/logo.png‘}} />。由於我們不管理這些資產，因此我們無法保證您使用Web URI引用的圖像的可用性。此外，我們沒有關於任意Web URI的相同數量的信息：當您的資產在本地文件系統上可用時，打包程序能夠讀取一些元數據（例如寬度，高度）並將其傳遞到您的應用程序，所以你實際上不需要指定寬度和高度，例如。指定遠程網址時，您需要明確指定寬度和高度，否則將默認為0x0。最後，正如您稍後將看到的，兩種情況下的緩存行為都不相同。

以下是對前一類資產的解釋：構建時您在文件系統中擁有的資產。在後一種情況下，假定您熟悉如何將圖片上傳到網頁上的任何網頁或移動應用程序可以訪問的地方。

資產生活的地方 (Where assets live)

開發中(In development)

在處理項目的本地副本時，資源將從本地文件系統提供，並與JavaScript模塊系統集成。所以如果我想包含一個圖像，我可以require它，我們可以這樣處理，如果它是JavaScript代碼：require（‘./ assets / images / example.png‘）。這裏唯一的區別是我們需要指定一個擴展名 - 沒有擴展名，模塊系統會認為它是一個JavaScript文件。此語句在編譯時評估一個對象，該對象包含有關可由Image組件使用以獲取並呈現它的資產的元數據：<Image source = {require（‘./ assets / images / example.png‘）} />

在生產中（In production）

每當您發布您的應用程序時，Expo都會將您的資產上傳到Amazon CloudFront，這是一款速度非常快的CDN。它以智能的方式執行此操作，以確保您的部署保持快速：如果自上次部署以來資產沒有發生變化，則會跳過它。你無需做任何事情就可以工作，它全部由expo自動處理。

性能(Performance)

某些資產太重要，無法啟動您的應用程序(Some assets are too important to start your app without)。字體通常屬於這個類別。在Web上，字體加載問題通過幾種縮略語已知：FOUT，FOIT和FOFT，它們代表無風格文本的Flash，不可見文本的Flash和虛假文本的Flash（在此處閱讀更多內容）。圖標字體驅動的icon-font-powered@ expo / vector-icons圖標的默認行為在第一次加載時為FOIT，在後續加載時，字體將被自動緩存。用戶對移動設備的要求比網絡更高，因此您可能希望通過在初始加載屏幕上預加載和緩存字體和重要圖像來進一步推進。

錯誤處理

本指南詳細介紹了一些可用於報告和從項目錯誤中恢復的策略。

處理致命的JS錯誤(Handling Fatal JS Errors)

如果您的應用程序遇到致命的JS錯誤，expo根據您的應用程序是否處於開發或生產狀態而不同地報告錯誤。

在開發中：如果您從XDE或exp服務您的應用程序，致命的JS錯誤將報告給React Native RedBox，並且不會采取其他操作。

在生產中（In Production）：如果您發布的應用程序遇到致命的JS錯誤，Expo將立即重新加載您的應用程序。如果重新加載後錯誤發生得非常快，Expo會顯示一個通用錯誤屏幕，並帶有一個按鈕來嘗試手動重新加載。

Expo還可以在您重新加載應用程序後向您報告自定義信息。如果您使用ErrorRecovery.setRecoveryProps，並且應用程序稍後遇到致命的JS錯誤，那麽在重新加載時，該方法調用的內容將被傳回到您應用的初始道具中。參見Expo.ErrorRecovery。

跟蹤JS錯誤

我們推薦使用Sentry來跟蹤生產中的JS錯誤。

原生錯誤怎麽樣？(What about Native Errors)

由於expo的本地代碼永遠不會改變您的項目，所以本機符號(the native symbols)不是特別有意義的（它們會向您展示對React Native核心或expo本地SDK的追蹤）。在絕大多數情況下*，JS錯誤才是是你關心的。

盡管如此，如果您真的想要本地崩潰日誌並將您的應用部署為獨立應用，則可以為Android配置自定義Fabric鍵。請參閱使用app.json進行配置。

對於iOS，我們現在不會公開一種方式讓您從expo應用程序中看到原生崩潰日誌。這是因為我們不會按需構建iOS本機代碼，這將需要將調試符號上傳到Fabric（或類似的服務）。

*在某些情況下，通過編寫壞JS可能導致本機代碼崩潰。通常，這些是在性能上不可接受的地方，例如為你的代碼添加本地驗證。 React Native橋梁的一部分，它將JS對象轉換為類型化的本機值。如果遇到可解釋的本機故障，請仔細檢查您的參數類型是否正確。

---

下一張繼續介紹，這一篇主要介紹了：expo中的App Icon,expo中的Assets,expo中的ErrorHandling錯誤處理,歡迎大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公

眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！

Expo大作戰(十)--expo中的App Icon,expo中的Assets,expo中的ErrorHandling錯誤處理