ReactNative——Iamge的大学问

时间:2022-11-24 18:01:23

怎么用??

先说几种加载方式

1本地图片

<Image source={require('./my-icon.png')} />

2原生资源图片(android为例)

 <Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

3网络图片

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />

注:必须指定图片大小;ios仅支持https;

iOS http处理:

这里写代码片

平台和不同分辨率如何适配呢??

如果你有my-icon.ios.png和my-icon.android.png,Packager就会根据自动选择针对不同平台的文件。

你还可以使用@2x,@3x这样的文件名后缀,来为不同的屏幕精度提供图片

知道了基本用法事不够的,项目当中可能还有以下各种问题:

1预加载占位符:图片暂未加载出来之前显示的那个。

???或者显示一个loading 的加载图。

2图片加载失败,默认的图片如何显示

3图片url本身就没有???

三目运算符解决