05｜Image：选择适合你的图片加载方式
静态图片资源
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
React Native框架中的Image组件使用方法和最佳实践是本文的重点。作者详细介绍了四种图片加载方式：静态图片资源、网络图片、宿主应用图片和Base64图片，并提供了详细的使用方法和注意事项。文章强调了图片在用户体验中的重要性，以及缓存和预加载机制对图片加载速度和用户体验的重要性。此外，还介绍了静态图片资源的加载原理和网络图片的使用建议。最佳实践方面，建议在动态更新的React Native应用中，使用自动化工具管理网络图片和Base64图片，以提高开发效率。总的来说，本文为开发者提供了全面的React Native Image组件的使用指南，涵盖了技术细节和最佳实践，对于想要深入了解React Native中图片加载的开发者具有很高的参考价值。
《React Native 新架构实战课》，新⼈⾸单¥59
全部留言(12)
- 最新
- 精选
极客时间用户发布包的时候打包的bundle和images都在包里面，如果动态更新的话怎么处理bundle和images？作者回复: 将 bundle 和 images 压缩成一个 zip 是一种方式
2022-12-21归属地：北京
小天儿第一题题意没有太理解； 第二题的话，如果是我，应该会使用 node 来开发一个命令行工具，以文件夹划分项目，通过添加一个 json 配置文件的方式关联项目与其配置（上传地址、秘钥等等），然后只需要执行同步命令，就可以快速对本地存在而远程不存在的图片进行上传作者回复: 思路很正确，厉害👍
2022-05-14- yuxizhe老师，你好，请问这里“编译后的 Bundle 和静态图片资源，会在构建时内置到 App 中”，内置到App哪个目录下呢？
作者回复: 你好，在打包好的文件中你搜索 httpServerLocation 就能找到它的地址，文稿中示例代码如下： module.exports = _$$_REQUIRE(_dependencyMap[0]).registerAsset({ "__packager_asset": true, "httpServerLocation": "/assets/src/Lesson3Image", "width": 190, "height": 190, "scales": [1], "hash": "0d4ac32eb69529cf90a7b248fee00592", "name": "dianxin", "type": "jpg" });
2022-04-18 
沐老师有没有遇到过一个页面最多只能加载15张uri格式的图片，超出就会显示为空白作者回复: 你指的 uri 是使用 url 加载的远程图片是吧？ 我没有遇到过原创图片加载的问题，建议按照二分法，检查一下自己/别人本地环境、当前/历史版本有没有问题。
2022-04-15- 潇潇暮雨老师是否遇到过Image加载不出来远程图片的情况，宽高都有设置，偶现，ios出现的频率高些，RN0.59版本。后来我们就不用RN的Image了，桥接了原生网络图片库。
作者回复: 我们没有遇到过，不过我们也对 Image 进行了底层改造。
2022-04-12 
Hozan如果有讲到@2x @3x这些不同图片是怎么在不同手机分辨率自动适配的，就更好一点😁2022-07-221- 极客时间用户动态更新的话，bundle和images作为一个压缩包，app通过网络下载然后解压到手机沙盒里面，这样加载bundle的时候，images也有了。2022-12-21归属地：上海
佰亿iOS图片缓存我记得是用了nscache，缓存大小20M2022-06-29- 周文硕这篇讲的很清晰，点赞2022-06-24
- Geek_a96f3d我想知道 大家怎么实现图片管理工具的2022-04-26