图片资源( jpeg、png、svg、webp ... )作为与用户交互的界面元素,在客户端产品中起到了非常重要的角色作用。在应用开发中,移动端与PC的图片使用策略也有所不同。PC端较大的内存容量,快速的渲染能力使各类型图片资源都能得到较好的使用。而移动端由于设备内存,GPU渲染都与PC有较大差别,所以在App应用开发中,需要我们单独分析处理。今天我们聊聊在React Native开发中,如何优美的使用图片资源。
在 React Native 开发中,目前主流的图标解决方式大概有四种:
基本图片格式(png、jpeg)
基本图片格式是开发者最常用的一种图片资源,RN官方提供了在移动端适配的解决方案,直接使用 Image 标签就可以加载网络、本地图片。
【缺点】需要引入多倍图(@2x / @3x)进行适配,使得 jsBundle 体积增大,内存占用的消耗比较明显。热更新时对流量(虽然你不在乎),影响较大。资产变更必须伴随二进制版本。(apk | ipa)
Url
将图片保存在服务端,客户端以URL的方式进行加载。客户端不需要任何处理,例如在RN中加载网络图,只需要将URL传递给Image </