image - React-native 延迟加载本地图像
问题描述
我有一个混合反应原生应用程序,我有一些从包中加载的静态图像。在应用程序中,当我打开包含图像的页面时,它会在图像被解码时显示一个灰色矩形。以下是我的意思的一些图片:
当页面加载时,我可以首先看到左侧图像,延迟约 0.2 秒后右侧图像淡入。我已经搜索了这个问题,但找不到任何干净的解决方法。这是我用来加载图像的代码:
<Image
style={{
height: 30,
width: 30,
marginStart: 5,
}}
source={require('../assets/google-logo.png')}
/>
我什至尝试通过应用程序包加载图像(即通过 XCode/Android Studio 添加图像),但同样的情况再次发生。我认为这可能是调试版本的影响,因为它是从打包程序加载的,但后来我构建了一个发布版本,同样的事情发生了。
我见过一些解决方案,它们使用组件的状态在加载图像时设置标志,然后渲染组件,但我认为应该有更好的东西。这个问题有什么干净的解决方案吗?
这对于 react-native 非常令人失望,它无法以愉快的方式加载简单的小图像!
解决方案
问题是我的。我有几张图片,其中一些是从互联网上加载的,因此我使用了react-native-element
's Image 组件,该组件在下载图片时有一个占位符。这个图像组件导致了效果,所以我将这两个图像添加为:
import { Image } from 'react-native';
import { Image as RneImage } from 'react-native-elements';
现在,当我使用 Image form React Native 内核时,它可以快速加载静态图像!
推荐阅读
- python - Where does `conda` keep the installed packages on windows?
- azure-iot-edge - 最大模块数
- html - 向后/向前导航时浏览器滚动到上一个位置而不是锚点
- python - plt.yticks 未在图中显示
- javascript - 在异步函数 reactjs 之后从另一个 Component 调用方法
- java - 断言为真,变量来自两种方法
- c# - exe文件没有根目录怎么办?
- javascript - 使用 Google App Script 在 Google Sheet 中查找日期
- python - 如何旋转 x 标签或 y 标签?(hvplot 或全息视图)
- docker - Docker compose build 始终将 ENV 值设置为端口 80