翻譯 | 《JavaScript Everywhere》第25章 移動應用程序發布

寫在最前面

大家好呀，我是毛小悠，是一位前端開發工程師。正在翻譯一本英文技術書籍。

為了提高大家的閱讀體驗，對語句的結構和內容略有調整。如果發現本文中有存在瑕疵的地方，或者你有任何意見或者建議，可以在評論區留言，或者加我的微信：code_maomao，歡迎相互溝通交流學習。

(σﾟ?ﾟ)σ…:*☆哎喲不錯哦

第25章 移動應用程序發布

在我上世紀90年代中期的高中，為你的TI-81圖形計算器下載游戲是一種風潮。

有人會得到一個游戲的拷貝件，然后它會像野火一樣蔓延開來，我們每個人輪流用一根數據線把計算器連接到另一個計算器上，以便加載游戲。在你的計算器上玩游戲是一種既能讓你在課后或自習室里完成課余時間的方法，又能保持做作業的樣子。然而，正如你所想象的，這種分配方法很慢，需要兩個學生保持連接幾分鐘，而其他學生則只能等待著。今天，我們的數字袖珍計算機比我那簡陋的繪圖計算器功能強大得多，部分原因是我們可以通過可安裝的第三方應用程序輕松擴展其功能。

隨著我們最初的應用程序開發完成，我們現在可以發布我們的應用程序，這樣其他人可以訪問它。在本章中，我們將了解如何配置我們的應用程序。

然后我們將在Expo上公開發布我們的應用。

最后，我們將生成可以提交到蘋果或谷歌Play倉庫的應用程序包。

app.json配置

Expo應用程序包括一個app.json文件，該文件用于配置特定于應用程序的設置。

當我們生成一個新的Expo應用程序時，會自動為我們創建一個app.json文件。讓我們看一下為我們的應用程序生成的文件：

{"expo": {"name": "Notedly","slug": "notedly-mobile","description": "An example React Native app","privacy": "public","sdkVersion": "33.0.0","platforms": ["ios", "android"],"version": "1.0.0","orientation": "portrait","icon": "./assets/icon.png","splash": {"image": "./assets/splash.png","resizeMode": "contain","backgroundColor": "#ffffff"},"updates": {"fallbackToCacheTimeout": 1500},"assetBundlePatterns": ["**/*"],"ios": {"supportsTablet": true},"android": {}} }

其中大多數配置是不言自明的，但讓我們回顧一下它們的目的：

• name

  我們的應用程序的名稱。

• slug

  用于發布Expo應用程序的URL名稱，位于expo.io/project-owner/slug。

• description

  對我們項目的描述，將在通過Expo發布應用程序時使用。

• privacy

  Expo項目的公共可用性。可以將其設置為public或unlisted。

• sdkVersion

  Expo SDK版本號。

• platforms我們的目標平臺，包括ios, android, and web.

• version

  我們應用程序的版本號，應遵循語義版本標準。

• orientation方向

  我們應用程序的默認方向，可以使用縱向或橫向值鎖定，也可以將用戶設備的旋轉方向與默認方向匹配。

• icon

  應用程序圖標的路徑，將同時用于iOS和Android。

• splash

  應用程序加載屏幕的圖像位置和設置。

• updates

  加載應用后，我們的應用應如何通過空中（OTA）更新進行檢查的配置。該fallbackToCacheTimeout參數允許我們指定時間長度（以毫秒為單位）。

• assetBundlePatterns

  允許我們指定應與我們的應用程序捆綁在一起的資源的位置。

• ios和android

  啟用特定于平臺的設置。

此默認配置為我們的應用程序提供了堅實的基礎。在Expo文檔中可以找到許多其他設置。

圖標和應用程序加載屏幕

我們設備上的小方形圖標已成為現代社會中最知名的設計之一。閉上你的眼睛，我相信你可以想象到數十個圖標，包括徽標或特定的背景顏色。此外，當用戶點擊圖標時，會出現一個初始的靜態“啟動屏幕”，該初始屏幕在應用程序加載時顯示。到目前為止，我們已經使用了默認的空白Expo圖標和啟動屏幕。我們可以在應用程序中將其替換為自定義的設計。

我在assets/custom文件夾中包含一個“值得注意的”圖標和啟動屏幕。我們可以通過將它們替換為assets目錄中的圖像或更新我們的app.json配置以指向自定義子目錄中的文件來利用它們。

App圖標

icon.png文件是一個正方形1024×1024像素PNG文件。如果我們使用app.json中的屬性指向該文件，Expo將為各種平臺和設備生成適當的圖標大小。圖標應完全是正方形，沒有任何透明像素。這是包括應用程序圖標的最簡單、最直接的方法：

"icon": "./assets/icon.png",

除了單個跨平臺圖標，我們還可以選擇包含特定于平臺的圖標。這種方法的主要優點是包括適用于Android和iOS的單獨圖標樣式，尤其是如果你有興趣使用Android的圖標樣式時。

自適應圖標。

對于iOS，我們將繼續使用單個1024×1024 png。在app.json文件中：

"ios": {"icon": IMAGE_PATH }

要使用Android的自適應圖標，我們需要指定一個前臺圖像，一個背景顏色（或backgroundImage）和一個后備靜態圖標：

"android": {"adaptiveIcon": {"foregroundImage": IMAGE_PATH,"backgroundColor": HEX_CODE,"icon": IMAGE_PATH} }

對于我們的用例，我們可以繼續使用單個靜態圖標。

開機畫面

初始屏幕是在我們的應用程序在設備上啟動時短暫顯示的全屏圖像。我們可以使用在assets/custom中找到的默認圖片替換默認的Expo圖片。盡管設備的大小在平臺內和平臺之間會有所不同，但我還是選擇使用1242×2436的大小的

Expo文件。然后，Expo將調整圖像的大小，以跨設備屏幕和寬高比工作。

我們可以在app.json文件中配置初始屏幕，如下所示：

"splash": { "image": "./assets/splash.png", "backgroundColor": "#ffffff", "resizeMode": "contain" },

默認情況下，我們設置的是白色背景色，當圖像加載時，該顏色可能可見；或者，取決于我們選擇的顏色。

resizeMode，作為初始屏幕圖像周圍的邊框。我們可以更新它以匹配屏幕的顏色：

"backgroundColor": "#4A90E2",

resizeMode指示如何針對各種屏幕尺寸調整圖像大小。

通過設置為contain時，我們保留了原始圖像的長寬比。

當你使用contain時，某些屏幕尺寸或分辨率將把backgroundColor作為初始屏幕圖像周圍的邊框。

或者，我們可以將resizeMode設置為cover，這將擴展圖像以填充整個屏幕。

由于我們的應用程序具有細微的漸變，因此我們將resizeMode設置為涵蓋：

"resizeMode": "cover"

圖25-1。我們的應用程序啟動畫面

以此配置了我們的圖標和初始屏幕圖像（請參見圖25-1）。現在，我們準備研究如何發布我們的應用程序，以使其他人可以訪問它。

Expo發布

在開發過程中，我們的應用程序可通過局域網在手機上的Expo Client應用程序中訪問。這意味著只要我們的開發電腦和手機在同一網絡上，我們就可以訪問該應用程序。Expo使我們能夠發布項目，該項目將應用程序上傳到Expo CDN并為我們提供可公開訪問的URL。這樣，任何人都可以通過Expo Client應用程序運行我們的應用程序。這對于測試或快速發布應用程序很有用。

要發布我們的項目，我們可以單擊瀏覽器的Expo Dev Tools中的“發布或重新發布項目”鏈接（請參見圖25-2），或在我們的終端輸入expo publish。

圖25-2。我們可以直接從Expo Dev Tools發布我們的應用程序

打包完成后，任何人都可以訪問https://exp.host/@/通過Expo Client App訪問該應用程序。

創建本機版本

雖然直接通過Expo發布是測試或快速使用的絕佳選擇，但很可能我們希望通過Apple App Store或Google Play Store發布我們的應用程序。為此，我們將構建包上傳到各自商店中。

Windows用戶

根據Expo文檔，Windows用戶需要啟用Linux的Windows子系統（WSL）。為此，請按照Microsoft提供的Windows 10安裝指南。

iOS

生成iOS版本需要具有Apple Developer Program，每年收費99美元。使用該帳戶，我們可以在app.json文件中為iOS添加一個bundleIdentifier。

此標識符應遵循反向DNS表示法：

"expo": { "ios": {"bundleIdentifier": "com.yourdomain.notedly"} }

隨著app.json文件的更新，我們可以生成構建。在終端應用程序中，從項目目錄的根目錄中輸入：

$ expo build:ios

運行構建后，系統將提示你使用Apple ID登錄。登錄后，系統將詢問你幾個有關如何處理憑據的問題。Expo能夠為我們管理所有憑據和證書，你可以通過在以下每個提示符下選擇第一個選項來允許它們：

? How would you like to upload your credentials? (Use arrow keys) ? Expo handles all credentials, you can still provide overridesI will provide all the credentials and files needed, Expo does limited validat ion? Will you provide your own Apple Distribution Certificate? (Use arrow keys) ? Let Expo handle the processI want to upload my own file? Will you provide your own Apple Push Notifications service key? (Use arrow keys) ? Let Expo handle the processI want to upload my own file

如果你擁有有效的Apple Developer Program帳戶，Expo將生成文件，該文件可以提交給Apple App Store。

安卓系統

對于Android，我們可以生成Android打包文件（APK）或Android應用程序捆綁包（AAB）文件。Android App Bundles是更現代的格式，所以讓我們走這條路。

如果你有興趣，Android開發人員文檔詳細描述了App Bundle的好處。

在生成捆綁包之前，讓我們更新app.json文件包含一個Android標識符。與iOS類似，這應該采用反向DNS表示法：

"android": {"package": "com.yourdomain.notedly"}

這樣，我們可用于從終端應用程序生成應用程序包。確保進入項目的根目錄并運行以下命令：cd

$ build:android -t app-bundle

必須對應用捆綁包進行簽名。盡管我們可以自己生成簽名，但Expo可以為我們管理密鑰庫。運行命令生成捆綁包后，你將看到以下提示：

? Would you like to upload a keystore or have us generate one for you? If you don't know what this means, let us handle it! :)1) Let Expo handle the process!2) I want to upload my own keystore!

如果選擇1，Expo將為你生成應用程序捆綁包。在該過程結束時，你可以下載文件，該文件可以上傳到Google Play商店。

發布到App Store

由于審查指南的變化和相關費用，我將不會介紹將應用程序提交到Apple App Store或Google Play商店的具體過程。Eopo文檔很好地匯集了資源和指南，并且是有關如何將應用發布到商店的過程的有用且最新的指南。

結論

在本章中，我們研究了如何發布和發布React Native應用程序。

Expo的工具使我們能夠快速發布用于測試的應用程序，并生成可以上傳到應用程序倉庫的生產版本。Expo還為我們提供了用于控制證書和依賴項的選項。

這樣，我們就成功編寫并發布了有后端數據的API，一個Web應用程序，一個桌面應用程序和跨平臺移動應用程序！

如果有理解不到位的地方，歡迎大家糾錯。如果覺得還可以，麻煩您點贊收藏或者分享一下，希望可以幫到更多人。

總結

以上是生活随笔為你收集整理的翻译 | 《JavaScript Everywhere》第25章 移动应用程序发布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。