和大家一起学习一下Image加载图片的技巧和如何去使用Image。
1.如何使用静态图片资源
通过 <Image source={require('./images/icon.jpg')} style={{width:200,height:200}}></Image>
加载图片。
注意:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串(不能使用变量!因为require是在编译时期执行,而非运行时期执行!)。
下面的写法即错误
<Image source={require('./‘ + icon + ’.jpg')} style={{width:200,height:200}}></Image>
请注意:通过这种方式引用的图片资源包含图片的尺寸(宽度,高度)信息,如果你需要动态缩放图片(例如,通过flex),你可能必须手动在style属性设置
{ width: undefined, height: undefined }
。
2.如何使用网络图片资源
通过<Image style={{width:200,height:200}} source={{uri:'http://newtab.firefoxchina.cn/img/sitenav/logo.png'}}></Image>
加载网络图片,加载网络图必须要设置其宽高,否则加载不出图片。
3.如何使用原生图片资源
原生图片为ios或android中的图片,在android中drawable中的图片,Android Studio中没有drawable文件夹,需要新建一个drawable文件夹。
在React Native 中无论是加载网络图片还是原生图片都需要设置图片的宽高,如果没有设置,React Native不能判断其大小,没有办法完成
图片的一个渲染。
在drawable文件夹下添加一张名称为icon的图片,可以通过
<Image style={styles.ImageStyle} source={{uri:'icon'}}></Image>加载原生图片。
4.图片使用的技巧
现在不同分辨率手机越来越多,如何保证图片在不同分辨率上的手机正常显示呢?
这个时候我们就需要用到屏幕适配来解决这个问题,这个适配我们有个小技巧,我们在在显示静态图片资源时,
我们可以为一个静态图片资源指定不同分辨率。