Expo大作戰(十五)--expo中splash啟動頁的詳細機制

来源:https://www.cnblogs.com/gdsblog/archive/2018/03/13/8562215.html
-Advertisement-
Play Games

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

更多>>

接下來就開始擼碼

啟動屏（Splash screen）

啟動屏幕（也稱為啟動屏幕）是用戶在打開應用程式時看到的第一個屏幕，並且在載入應用程式時它仍然可見。通過使用AppLoading組件，您可以控制啟動畫面何時消失。

為您的應用自定義啟動畫面(Customize the splash screen for your app)

預設的初始屏幕是一個空白的白色屏幕。這可能對你有用，如果有的話，你很幸運！如果沒有，你也很幸運，因為使用app.json和splash鍵很容易定製。我們來看看它。

製作一個啟動圖像
iOS人機界面Guidlindes列出靜態啟動圖像大小。我將使用1242像素寬和2436像素高 - 這是iPhone 8 Plus（最寬iPhone）的寬度和iPhone X（最高iPhone）的高度。expo根據設備的大小為您調整圖像大小，我們可以使用splash.resizeMode指定用於調整圖像大小的策略。

Android屏幕尺寸因市場上各種各樣的設備而異。解決這個問題的一個策略是查看最常見的解決方案並圍繞這個解決方案進行設計 - 您可以在這裡看到Unity發佈的一些統計數據。鑒於我們可以自動調整大小和裁剪我們的splash 圖像，只要我們不依賴精確匹配屏幕的splash 圖像，我們可以堅持我們的尺寸。這很方便，因為我們可以在iOS和Android上使用一個splash 圖像 - 。

如果你喜歡，你可以使用這個Sketch模板。我做了，我將背景顏色改為淡黃色，併在中間放了一張麵條表情符號。值得註意的是，splash 圖像支持透明度，儘管我們沒有在這裡使用它。

將圖像導出為PNG並將其放入項目目錄中。 我假設它在assets目錄中並命名為splash.png。

splash.image

打開你的app.json併在“expo”欄位中添加以下內容：

"splash": {
  "image": "./assets/splash.png"
}

現在重新打開expo客戶端並打開您的應用程式，您將看到美麗的啟動畫面。 在顯示之前可能會有延遲，請參閱下麵的“環境之間的差異”以獲取更多信息。

註意：需要關閉並重新打開iOS上的Expo客戶端應用程式才能看到清單中啟動畫面的更改。 這是我們正在努力解決的一個已知問題。 在Android上，您需要按通知抽屜中的刷新按鈕。

splash.backgroundColor

如果您為splash圖像設置了白色以外的背景顏色，則可能會在其周圍看到白色邊框。 這是由於splash.resizeMode屬性（我們稍後會討論）和預設背景顏色，即#ffffff（白色）。 讓我們通過將splash.backgroundColor設置為和我們的splash圖像背景顏色相同來解決此

"splash": {
  "image": "./assets/splash.png",
  "backgroundColor": "#FEF9B0"
}

splash.resizeMode

您提供的任何splash圖像都將調整大小以保持其寬高比並適合用戶設備的解析度。 有兩種策略可用於調整大小：contain （預設）和cover。 在這兩種情況下，splash圖像都在啟動屏幕內。 這些工作與React Native <Image>組件的resizeMode樣式等價物相同，如下圖所示。

將其應用於我們的noodle示例，讓我們刪除backgroundColor並嘗試一下：

"splash": {
  "image": "./assets/splash.png",
  "resizeMode": "cover"
}

請註意，在最後一個示例中，我們拉伸圖像以填充整個寬度，同時保持縱橫比，所以麵條表情符號最終比resizeMode設置為包含時更大。 如果你仍然不清楚包含和封面之間的區別，這篇博客文章正是描述了它們的含義。

自定義iOS和Android的配置

通過將配置嵌套在app.json中的android或ios密鑰下（與您將如何為任一平臺定製圖標相同），可以基於每個平臺配置任何啟動選項。除此之外，某些配置選項僅適用於iOS或Android。

  • 在iOS上，如果您想在iPad上顯示不同的splash圖像，可以設置ios.splash.tabletImage。
  • 在Android上，您可以為不同的設備DPI設置啟動圖像，從ldpi到xxxhdpi。

使用AppLoading

只要AppLoading是您的應用程式中呈現的唯一組件，您的啟動畫面將保持可見狀態。我們建議在緩存資產或從AsyncStorage獲取任何數據以設置應用程式時使用AppLoading。閱讀關於AppLoading的更多信息。

環境之間的差異

您的應用程式可以從Expo客戶端或獨立應用程式中打開，並且可以發佈或開發。這些環境之間的啟動屏幕行為略有不同。（仔細觀察這組啟動屏幕圖片的不同）

 

  • 在左邊，我們正在使用expo客戶端並載入一個目前正在開發的應用程式。 請註意，在啟動畫面的底部，您會看到一個信息欄，顯示與準備JavaScript並將其下載到設備相關的信息。 在出現splash圖像之前我們會看到一個橙色屏幕，因為背景顏色是立即設置的，但需要下載圖像。
  • 在中間，我們在expo客戶端，我們正在載入已發佈的應用程式。 請註意，該圖像不會立即出現。
  • 在右邊，我們在一個獨立的應用程式。 請註意，立即出現splash圖像

由此得出結論，獨立引用程式圖像載入效果更好

分離的ExpoKit應用程式

如果您在iOS上運行exp detach，並且您的應用程式已經使用splash API，則生成的ExpoKit項目將包含為您的應用程式正確配置的Interface Builder啟動屏幕文件。在此之後，如果您想更改應用的啟動畫面，請直接編輯Interface Builder文件。

對於在不使用splash API的情況下運行exp分離的用戶，我們在EXShell plist（iOS）中添加isSplashScreenDisabled: YES。如果您以後決定在分離的iOS項目中使用啟動畫面，請將名為LaunchScreen的界面生成器文件添加到您的Xcode項目中，並從plist中刪除此項。

已知的問題

我們知道以下情況，並且很快就會解決。

  • iOS初始屏幕狀態欄在獨立應用程式中為白色，但在Expo客戶端為黑色。預設情況下，它在獨立應用程式中應該很暗，也應該可以自定義。
  • 在iOS上需要關閉並重新打開Expo客戶端才能看到啟動畫面的更改。

從載入API遷移(Migrating from the loading API)

載入API從SDK 22開始已被棄用，並且嚴重惡化了用戶體驗，所以我們建議您儘快更換以便儘快投放 - 載入API將被移除以支持SDK 25中的splash。(這是一個更新說明)

下一張繼續介紹，這一篇主要介紹了：expo中splash啟動頁的詳細機制， 歡迎大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql存儲過程（批量生成論壇中發帖、回帖、主題等數據）
    USE 資料庫名稱1;DROP PROCEDURE IF EXISTS 資料庫名稱1.存儲過程名稱;delimiter $$CREATE PROCEDURE 資料庫名稱1.存儲過程名稱(in v_count bigint,in v_count2 bigint)BEGINset @vCount1=v_ ...
  • MySQL管理表和索引
    MySQL管理表和索引 創建表： 1、直接定義一張空表； 2、從其它表中查詢出數據，並以之創建新表； 3、以其它表為模板創建一個空表； 創建表時定義其中的欄位類型時為數值時 加 unisined表示無符號數值類型（只有正數）。 例如create table 表名 ( id int unisgned  ...
  • 開啟和查看mysql的bin-log日誌
    [root@VM_0_7_centos data]# vim /etc/my.cnf [root@VM_0_7_centos data]# vim /etc/my.cnf [root@VM_0_7_centos data]# /etc/init.d/mysqld restart Shutting d... ...
  • [日常] MySQL記憶體不足啟動失敗的解決方法
    1.啟動mysql時,一直不成功,查看錯誤日誌 /var/log/mysql/error.log 2.主要的錯誤信息有如下幾條: 3.查詢後是因為記憶體不足,查看記憶體 增加swap交換空間解決問題: 4.增加自動掛載: 在文件/etc/fstab中加入 /swapfile swap swap defa ...
  • 連接mongodb資料庫的配置說明
    ...
  • Hive_01、Hive相關介紹&安裝
    前言 今天筆者要介紹的是hive相關的內容，會從概念到安裝，然後之後再一步一步深入介紹相關知識。 一、hive的相關介紹 1.1hive的相關定義 hive是基於Hadoop的一個數據倉庫工具，可以將結構化的數據文件映射為一張資料庫表，並提供簡單的sql查詢功能，可以將sql語句轉換為MapRedu ...
  • Android遠程桌面助手(B1185)for Android P開發者預覽版
    Android P開始逐步限制特定非 SDK 介面的訪問許可權，並要求開發者使用公開 API 里的替代介面。針對該特性，更新了Android遠程桌面助手，目前支持Android P開發者預覽版。 ...
  • Expo大作戰(十六)--expo結合firebase 一個nosql資料庫（本章令我驚訝但又失望！）
    簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類