哈喽哈喽，大家好。我是金樽清酒。最近也是刚刚开始学习react-native。说实话感觉react-native的学习成本还是相对来说比较高的。首先它是基于react的，对于没有接触过react的小伙伴来说先得学习一下react才能对react-native得心应手。不然你不知道什么是声明式也就写不好react-native。其次，为什么说学习成本有些高呢。它是用来开发原生ios和安卓的，所以你也需要了解一些安卓跟ios的知识并且它的一些组件和api也与react有一些区别。所以今天我们来学习一下它的Image组件。看一下与react的使用有什么不同。
Image四种不同的加载方式
我们可以看到官方文档对Image功能的介绍。用于显示不同类型的React组件。但是这些不同类型的图片加载方式是一样的嘛？有什么区别嘛？分别有哪些适用的场景呢？
Image组件支持四种不同的加载方式
- 静态图片资源
- 宿主应用图片
- 网络应用图片
- base64图片
静态图片资源
静态图片资源，就是下载到项目中的内置的图片资源。是不会发生变化的。用静态服务资源的好处是直接从本地读取图片资源，不受网络的影响加载速度快。对于一些追求高性能且图片不会发生变化的可以考虑这种方式。那我们如何用Image引入静态图片呢？
首先，我们在项目的文件夹里面放一张图片。这就是我们的静态图片资源了。然后我们怎么使用呢？
我们用require引入我们的图片的路径，然后给source属性赋值。同时你可以用style属性设置图片的宽高。
这样我们的图片就引入进来了。也就是说对于静态资源的引入，我们可以用require来引入。对于这个require引入静态资源有一个注意事项。require() 的参数必须是字符串字面量 ，不能是变量。数，因为 React Native 的打包工具（Metro）需要在编译时静态分析所有 require() 调用的路径。
网络应用图片
有时候我们的图片资源是一个url地址。也就是通过网络动态加载的图片。我们平常用的最多的也就是这种形式的图片资源了，后端接口给你返回一个url字符串。你怎么拿到这个字符串渲染图片资源到页面上呢？
我们再拿原来的组件来测试一下。
在Image的source属性里面赋值一个对象，key为uri，值为url地址。而且要设置宽高才能看到图片。那网络应用图片的加载是蛮简单的。就是在source里面设置一个key为uri，值为url地址的对象就可以了。
什么是base64图片？
- 了解一下base64图片。base64是将二进制编码图像数据编码成ASCAll码字符串的一种方式。
优缺点对比
| 优点 | 缺点 |
|---|---|
| 无需额外网络请求 | 体积增大约33% |
| 可内联到HTML/CSS/JS | 无法利用浏览器缓存 |
| 无跨域问题 | 解码需要CPU资源 |
| 适合小图标 | 不适合大图片 |
常见的使用场景
1. 前端开发
- 小图标内联（<1KB）
- 邮件内容中的图片
- 网页预加载占位图
- 需要快速显示的预览图
2. 移动端(React Native)
- 本地缓存图片数据
- 与后端API交互时减少请求次数
- 离线功能中的资源存储
- 需要加密传输的图片
3. 特殊场景
- 二维码生成
- 截图后即时预览
- 配合WebView使用
- 数据库存储小图
综上所述。base64图片是一种将二进制图片改成ASCALL码字符串形式的图片。使图片可以内联到html中。无需网络来加载这个图片。所以加载图片特别的迅速。但是会使文件的大小增大三分之一左右。比较影响文件的大小。所以一般适合追求用户体验和一些小图标。可以减少网络请求，得到更好的用户体验。
如何在react-native当中引入base64的图片呢？
也是很简单的。也是在sourcce属性设置成以uri为key。base64编码位置的对象就可以了。但是加载的方式是不一样的。网络应用图片是从http请求获取的图片。而base64图片是打包后内嵌在bundle包里面的。不受网络的影响。但是会增大包的体积。所以适合用于一些较小的图片。
可以看到它的用法还是蛮简单的哦。
宿主应用图片
在 React Native 中，"宿主应用图片"通常指的是从 原生平台（iOS/Android）资源目录 直接引用的图片，而非通过 JavaScript 层动态加载的图片。这类图片的加载性能更高，适合应用图标、启动屏或核心 UI 元素。
这种情况发生在一部分用react-native开发一部分原生开发的情况。就我个人而言还没有接触到，毕竟刚开始学习react-native。
总结
对于加载图片，react-native有自己的组件Image。Image有四种加载的方式。每种方式呢都有自己的优缺点。开发者得根据他们的特征去进行选择。需要注意的是。加载静态资源图片的时候需要用require引入。并且注意require里面的参数不能是变量，不然react-native的打包工具识别不了。对于网络资源图片和base64资源图片。一般在source属性里面配置以uri为key，资源地址或base64编码为值的对象。这样就能正确的引入图片了。
最后，大家有快速上手react-native的方法可以推荐一下嘛。