react-native之Image加载url图片问题

react-native之Image加载图片问题

Image加载图片有两种方式，一种是本地资源，一种可以是网络图片，

本地资源加载，如：

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

这种方式简单，都没有问题。

通过url的方式加载图片，如：

   <Image source={{uri:'http://xxxxxxxx'}} style={{width: 90, height: 90}}/>

下面这种是错误的：

   <Image source={{uri:'http://xxxxxxxx'}}/>

这里需要注意两点：
1、图片地址关键字是 uri 不是 url，
2、需要指定图片的size，否则无法显示，我们了解到，在浏览器中，如果你不给图片指定尺寸，那么浏览器会首先渲染一个0x0大小的元素占位，然后下载图片，在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是UI会在图片加载的过程中上下跳动，使得用户体验非常糟糕。