React Native图片资源使用方案

 

图片资源（ 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传递给Ima