前端VUE项目中如何处理图片加载失效/裂开的问题

Posted 2023-05-16

参考技术A PS:以下只是个人处理方式进行记录

处理方式概述：可以借用img标签的onerror事件，通过自定义指令进行赋值

Expo大作战(十三)--expo如何自定义状态了stateBar以及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， 欢迎大家关注我的微信公众号，这篇文章是否被大家认可，我的衡量标准就是公众号粉丝增长人数。欢迎大家转载，但必须保留本人博客链接！