ReactNative的图片加载可以分为本地图片加载和网络图片加载以及base64格式图片加载。

本地图片加载的是工程里面的静态图片文件,加载方式:

<Image source={require('./assets/images/xx.png')} />

需要说明的是本地图片是不需要设置宽度和高度的,react native可以获取到。另外,本地图片的读取已经封装过,可以根据设备的屏幕大小自动选择合适大小的图片,图片命名格式:

一倍大小:xxx.png

二倍大小:xxx@2x.png

三倍大小:xxx@3x.png

其他类推。


网络图片的加载方式方式:

<Image source={{uri:' width={100} height={100}  />

需要注意的是,网络图片的加载必须要指定大小,否则显示不出来。


BASE64方式的图片这里就不提了,毕竟使用的比较少。