【React Native开发】 - Image的加载技巧与使用

和大家一起学习一下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.图片使用的技巧

现在不同分辨率手机越来越多，如何保证图片在不同分辨率上的手机正常显示呢？

这个时候我们就需要用到屏幕适配来解决这个问题，这个适配我们有个小技巧，我们在在显示静态图片资源时，

我们可以为一个静态图片资源指定不同分辨率。