Expo大作戰(十三)--expo如何自定義狀態了statusBar以及expo中如何處理離線緩存載入 offline support

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

更多>>

接下來就開始擼碼

---

配置狀態欄（status bar）

Expo和React Native為Android提供API和配置選項，為您的應用配置狀態欄。這些可用於控制應用程式中狀態欄的外觀。

配置（Android）

Android狀態欄的配置位於app.json的androidStatusBar項下。它公開了以下選項：

barStyle
此選項可用於指定狀態欄內容（狀態欄中的圖標和文本）是淺色還是黑色。通常情況下，背景較淺的狀態欄內容較暗，而背景較暗的狀態欄內容較淺。

有效值是：

1. light-content - 狀態欄內容為淺色（通常為白色）。這是預設值。
2. dark-content - 狀態欄內容為深色（通常為深灰色）。這僅適用於Android 6.0以上版本。以前版本是light-content（It will fallback to light-content in older versions.）。

backgroundColor

該選項可用於為狀態欄設置背景顏色。

請記住，expo應用程式預設情況下Android狀態欄是半透明的。但是，當您為狀態欄指定不透明背景色時，它將失去半透明性。

有效值是一個十六進位顏色字元串。例如 - ＃C2185B

使用第三方庫(Working with 3rd-party Libraries)

expo使預設狀態欄在iOS上與iOS保持一致，更符合設計。不幸的是一些類庫不支持半透明狀態欄，例如 - 導航庫，提供標題欄的庫等

如果你需要使用這樣一個庫，有幾個選擇：

• 將狀態欄的backgroundColor設置為不透明顏色（Set the backgroundColor of the status bar to an opaque color）

這將禁用狀態欄的半透明性。如果您的狀態欄顏色永遠不需要更改，這是一個不錯的選擇。

例：

{
  "expo": {
    "androidStatusBar": {
      "backgroundColor": "#C2185B"
    }
  }
}

• 使用React Native中的StatusBar API（Use the StatusBar API from React Native）

StatusBar API允許您動態控制狀態欄的外觀。 您可以將其用作組件或API。 查看React Native網站上的文檔以獲取示例。

• 在屏幕頂部放置一個空視圖（Place an empty View on top of your screen）

您可以使用背景顏色在屏幕頂部放置一個空白視圖以充當狀態欄，或者設置頂部填充。 您可以使用Expo.Constants.statusBarHeight獲取狀態欄的高度。 儘管這應該是你的最後一招，因為當狀態欄的高度發生變化時，這不起作用。

例：

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Constants } from 'expo';

const styles = StyleSheet.create({
  statusBar: {
    backgroundColor: "#C2185B",
    height: Constants.statusBarHeight,
  },

  // rest of the styles
});

const MyComponent = () => {
  <View>
    <View style={styles.statusBar} />
    {/* rest of the content */}
  </View>
}

如果您不需要設置背景顏色，則可以在包裝視圖上設置頂部填充。

 

離線支持 offline support

您的應用程式會遇到互聯網連接不足或完全不可用的情況，並且仍需要相當好地工作。本指南提供了更多信息和最佳實踐，以便在設備離線時提供良好的體驗。

在後臺載入JS更新（Load JS updates in the background）

當您嚮應用發佈更新時，您的用戶將通過無線廣播（over the air）接收新版本的JS。新版本將在下次應用程式啟動時下載，或者下次您調用Util.reload（）。此行為也適用於用戶第一次打開您的應用程式。

expo提供了多種行為來說明它應該如何下載你的JS。它可以通過啟動畫面或AppLoading組件阻止UI，直到下載新的JS，或者它可以立即顯示JS的舊版本併在後臺下載更新。如果您的用戶在任何時候都必須具有最新版本，則前者的選擇會更好;如果你有一個糟糕的互聯網連接，並且需要立即顯示一些內容，後一種選擇會更好。

要啟用後臺JS下載：

• 在iOS上，在app.json中將ios.loadJSInBackgroundExperimental關鍵字設置為true。這個配置本身不會在空中更新，並且需要生成一個exp build的新二進位文件：ios才能生效。
• 在Android上，此選項始終處於啟用狀態。當後臺下載完成時，您可以使用Util.addNewVersionListenerExperimental()執行操作。

下載後緩存您的資產（Cache your assets after downloading）

預設情況下，當您嚮應用發佈更新時，您的所有資產（圖片，字體等）都會上傳到世expo的CDN，這允許您通過無線更新它們。一旦他們被下載，你可以緩存它們，所以你不需要再次下載它們。如果您發佈更改，則緩存將失效，並且下載已更改的版本。

在您的獨立二進位文件中捆綁您的資源（Bundle your assets inside your standalone binary）

Expo可以在構建過程中將資產捆綁到獨立的二進位文件中，以便它們可以立即可用，即使用戶以前從未運行過應用程式。在以下情況下這很重要

1. 您的用戶第一次打開您的應用時可能沒有互聯網，或者
2. 如果您的應用程式依賴於非常多的資產數量才能正常運行第一個屏幕。（If your app relies on a nontrivial amount of assets for the very first screen to function properly.）

要在二進位文件中打包資源，請使用app.json中的assetBundlePatterns項來提供項目目錄中的路徑列表：

"assetBundlePatterns": [
  "assets/images/*"
],

下次運行exp構建時，包含與給定模式匹配的路徑的圖像將被捆綁到您的本機二進位文件中。

註意：此行為不適用於分離的ExpoKit項目。 我們正在努力改變這一不完美之處。

監聽網路可用性的變化

React Native公開了NetInfo API，它會通知您設備的可訪問性是否發生變化。 如果您發現沒有可用的連接，則可能需要更改UI（例如顯示橫幅或禁用某些功能）。

---

下一張繼續介紹，這一篇主要介紹了：expo如何自定義狀態了stateBar以及expo中如何處理離線緩存載入 offline support， 歡迎大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！