React Native之基础篇Image

        今天讲一下Image，其实在React Native里面Image的使用方式多种多样啊。现在贴一下代码来讲解一下

  <Image source={{ uri: i }} style={{ height: array[key] * (width - _getWidth(45)) / 2, width: (width - _getWidth(45)) / 2, resizeMode: 'cover' }} />

其中的source里面有俩种使用方式一种是这个网络图片的，这个就没什么好说吧。uri加上连接。

其中讲另一个问题就是require('../../img/company.png')的这个方式记住了- -这个东西里面的连接和require是不能分开的。如果分开了聚会报错了。

所以你想要给image设置底图应该使用三目运算法去解决。比如这样把

  <Image source={i？{ uri: i }：require('../../img/company.png')} style={{ height: array[key] * (width - _getWidth(45)) / 2, width: (width - _getWidth(45)) / 2, resizeMode: 'cover' }} />

那么就这样设置简单的。然后Image里面的resizeMode是一个比较经常使用到的地方

有这些属性'cover'，' contains '，'stretch'，'repeat'，'center' 

cover：在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等容器视图的尺寸（如果容器有padding内衬的话，则相应减去）译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白

contain：在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）译注：这样图片完全被包裹在容器中，容器中可能留空空白

stretch：拉伸图片而不维持宽高比，直到宽高都刚好填满容器。

repeat：重复平铺图片直到填满容器图片会维持原始尺寸。

center：居中不拉伸

其中图片，还有这些函数

onLayout 函数 

当元素挂载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}。

onLoad 函数 

加载成功完成时调用此回调函数。

onLoadEnd 函数 

加载结束后，不论成功还是失败，调用这个回调函数。

onLoadStart 函数 

加载开始时调用

然后呢里面还可以设置borderWidth这个东西就是设置边框之流的。那么圆角也是必然靠他的。