React Native 图像预取

2024-04-04

我很难理解Image prefetch。在里面doc's http://facebook.github.io/react-native/docs/image.html#prefetch对此没有太多解释:

“通过将远程映像下载到磁盘来预取远程映像以供以后使用 缓存”

您能否帮我理解以下有关图像预取的信息:

  1. 假设用户上传个人资料图像,并且该图像的 URL 存储在 AsyncStorage 中。

    • 我应该跑吗Image.prefetch(UserStore.profileImageUrl) 上传成功后仅一次。并通常在组件中使用预取图像,例如<Imagesource={{uri: UserStore.profileImageUrl}}/>

    • 或者我应该一直跑步Image.prefetch(UserStore.profileImageUrl)在组件中使用该图像之前,只需运行<Imagesource={{uri: UserStore.profileImageUrl}}/>

  2. 假设稍后用户通过上传新图像来更改其个人资料图像,成功上传后,我将预取新图像。之前缓存的图片还会存在于磁盘上吗?

    • 如果是的话,如果预取的图片很多,会不会占用设备很大的空间?
  3. 有没有办法手动从磁盘中删除预取的图像?

考虑到上述问题,如果在使用 React Native 和 expo 时有替代解决方案来实现图像缓存,请您帮我解决一下。


这确实是我一直在处理的一个问题,并且我了解到了一些事情Image.prefetch:

在当前React-Native版本(0.48),此方法仍在进行中。更准确地说:

  • ios 的实现仍然不完整。
  • 没有关于它的完整指南。
  • 无法清除缓存(您可以检查网址是否已缓存,但据我所知您现在无法清除它)。

因此,我不建议你使用它。无论如何,如果您想了解 API 是如何工作的,那就是:

Purpose

我认为这个 API 的目的很明显:

通过将远程图像下载到磁盘缓存来预取远程图像以供以后使用

这意味着您可以使用Image.prefetch(url)在你的constructor or componentWillMount。它尝试异步获取图像,然后使用某种 ActivityIndi​​cator 渲染您的页面,最后,当成功获取图像时,您可以重新渲染您的组件。

Image.prefetch(url)实际上将图像保存到磁盘(而不是内存),因此,无论何时何地您尝试使用

<Image source={{uri:url}}/>

首先它会检查缓存 url 列表,如果您之前预取过该 url(并且它位于磁盘上),则不会费心重新提取(除非您再次运行函数 `Image.prefetch(url)' (我不确定它是否正常工作)。

这个问题的含义非常复杂。这意味着如果您在一个组件内预取一张图像(例如<Component1/>),当您尝试在另一个组件中显示此特定图像时(例如<Component12>),它不会获取图像,仅使用磁盘缓存。

因此,要么根本不要使用这个 Image.prefetch(直到有一个完整的 API,具有缓存控制),要么使用它需要您自担风险。

  • 在安卓上

在 Android 上,您有 3 个用于预取的 API,但文档中仅介绍了其中之一:

  1. 预取:

    var response = Image.prefetch(imageUrl,callbackFunction)
    

Image.prefetch可以有一个可选的第二个参数callbackFunction,这是一个运行的函数Before正在获取图像。可以写成如下格式:

    var response = Image.prefetch(imageUrl,()=>console.log('Image is being fetched'))

可能值得注意的是,callbackFunction可以有一个名为requestId,(指示所有其他预取中预取的数量),然后可以使用它来中止提取。

    var response = Image.prefetch(imageUrl,(id)=>console.log(id))

而且,response是一个承诺,你可以使用.then预取图像后执行更多操作。

  1. 中止预取

     Image.abortPrefetch(requestId) ;
    

用于中止挂起的预取。用作参数的 requestId 与预取中看到的相同。

  1. 查询缓存

      Image.queryCache([url1,url2, ...])
        .then((data)=>console.log(data));
    

用于检查某个url是否已经被缓存,如果是则缓存在哪里(磁盘或内存)

  • on IOS

我认为只有Image.prefetch(url)目前在IOS上可用,并且没有可以作为第二个参数调用的回调函数。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native 图像预取 的相关文章

随机推荐

  • 将 2 元素数组的数组转换为散列,其中重复的键附加附加值

    例如 给定一个数组 array a b a c c b 返回以下哈希 hash a gt b c c gt b hash Hash array 覆盖以前的关联 产生 hash a gt c c gt b 使用功能性婴儿步骤 irb 01 0
  • 未填充方块的 Matplotlib 散点图

    我想制作一个带有未填充方块的散点图 markerfacecolor不是一个被认可的选项scatter https matplotlib org devdocs api as gen matplotlib pyplot scatter htm
  • 如何让应用程序兼容所有Android手机?

    请帮助我解决我的问题 在我的大多数应用程序中 Ui 设计并不兼容所有 Android 设备 即 所有小部件在所有手机中都没有按正确的顺序对齐 我想开发一个应用程序应该适合所有手机尺寸和分辨率 大手机 普通手机和小手机 请解决这个问题 提前致
  • 使用 jQuery 绘制饼图

    我想用 JavaScript 创建一个饼图 在搜索中我发现了 Google Charts API 由于我们使用的是 jQuery 我发现有Google 图表的 jQuery 集成 http www maxb net scripts jgch
  • 针对 arm64 和 32 位架构进行编译时的基础类型

    在为 arm64 编译 iOS 应用程序的代码时 我遇到了一个有趣的问题 该问题与自定义 Foundation 类型的不同基本类型有关 假设我想 printf 或 stringWithFormat 声明为的数字NSU整数 NSString
  • EF(实体框架)“using”语句的用法

    我有一个关于 MVC 的项目 我们选择 EF 进行数据库事务 我们为 BLL 层创建了一些管理器 我找到了很多例子 其中 using使用 语句 即 public Item GetItem long itemId using var db n
  • 我将如何保存和加载 UITextField?

    我到处搜索并尝试了很多代码 但似乎没有什么对我有用 我需要做的就是加载 在 viewDidLoad 上 一个文本字段并在按下按钮时保存它 是什么easiest这样做的方法 我正在使用单窗口应用程序 我没有视图控制器 这可能会有所不同 Tha
  • 运行 sympy 中表达式的 AST

    我正在使用 sympy 来计算复杂函数表达式的一些高阶导数 我想遍历表达式的 AST 例如首先深度遍历节点 我怎么做 一个简单的深度优先旅行将是这样的 from sympy import pi sin from sympy abc impo
  • 将 JSP 包含到 sling servlet 中

    我目前正在开发一个小项目 试图帮助某人弄清楚如何连接组件 理想情况下我们想做两件事 有一个呈现模板的 jsp 我们所有的业务登录都在 SlingAllMethodServlet 中 servlet 定义要点 package definiti
  • 如何使用 Slim 接受所有 REST URI 中的排序和分页参数?

    我正在使用 Slim PHP 框架为我的应用程序创建 RESTful API 我希望所有 URL 都能够接受排序和分页参数 有人可以告诉我最好的方法吗 另外 有人可以为我提供一些适当的 REST URI 吗 IE
  • vs2010调试:模块构建时没有调试信息?

    收到此消息 这不是真的 以下模块是在启用优化或没有调试信息的情况下构建的 它给了我一个临时 asp net 文件的路径 C WINDOWS Microsoft NET Framework v4 0 30319 Temporary ASP N
  • 日期格式到cron格式转换

    我想将日期格式更改为 cron 日期格式 怎么办 日期格式 2018 05 15 17 30 00 cron 格式 30 17 15 05 您可以通过多种方式做到这一点 但这是更简单的方法之一 bin bash DATESTR 2018 0
  • 如何将 PhpStorm 与 Xdebug 连接

    我希望这里有人可以帮助我解决我的问题 我最近进入了我的第一个 PHP 项目 需要设置调试 我知道很多人在我面前遇到了同样的问题 但我很难找到解决方案 我需要使用 Xdebug 设置 PhpStorm 并且所有设置使其仍然无法工作 当我开始调
  • MySQL 8.x 中的主要错误? -- 外键

    当从 MySQL 用于代码生成器 检索外键信息时 我注意到这种奇怪的行为 它看起来像是 MySQL 8 x 中的一个主要错误 当我使用创建外键时REFERENCES引擎不强制执行它 例如 create table p id int prim
  • ADO Error 异常处理?

    我刚刚通过将表和查询替换为 ADO 组件中的等效项 从使用 BDE 切换到 ADO 我总是在 try catch 中执行查询 如下所示 Fdm is Data Module TEndOfDay is TTable QEndOfDay is
  • iOS Swift:iOS 8 上的 unsafeMutableAddressor 崩溃

    通过堆栈跟踪 unsafeMutableAddressor崩溃似乎是在访问时AppConstant kShowOverlay从控制器的viewDidLoad 我已经定义了AppConstant swift像下面这样 struct AppCo
  • 在 Java 中,集合是最终的意味着什么? [复制]

    这个问题在这里已经有答案了 在 Java 中将集合声明为 Final 意味着什么 是不是不能再添加更多的元素了 难道已经存在的元素就不能改变了吗 难道是别的什么 不 这只是意味着引用不能更改 final List list new Link
  • 当页面比屏幕大时如何将div定位在屏幕中间

    您好 我正在使用类似于以下内容的方法来将 div 放置在屏幕中间
  • 如何让 在 IE 10、Firefox、Safari 等中显示全时间选择器

    我一整天都在为此苦苦挣扎 我一直在使用
  • React Native 图像预取

    我很难理解Image prefetch 在里面doc s http facebook github io react native docs image html prefetch对此没有太多解释 通过将远程映像下载到磁盘来预取远程映像以供