React Native之Image组件

　　同 HTML 的 img 元素一样，React Native 提供的 Image 组件可以用来显示各种途径的图片，比如网络图片、本地图片、照相机图片等。
　　虽然效果是一样的。然而用法还是有区别的。

　　1、src属性改为了source属性。

　　在web中，如果加载图片会使用img标签，其中src属性用来指定图片的地址。而在React Native中，使用Image组件来加载图片，src属性也变为了source属性，而且不接受字符串，值是一个带有uri属性的对象。

 

　　2、必须声明图片的宽、高（限网络图片）。

　　在web中，加载图片可以不必规定图片的宽、高，如果不设置那么会以图片的原始尺寸来显示；如果设置，可以只设置一个值，这时，图片会等比例缩放；如果设置两个值的话，则会根据规定尺寸来显示图片。而在React Native中，如果是加载网络图片时，必须声明图片的宽和高，否则图片不会显示。

 

　　3、宽高为逻辑像素点（不带单位）。

　　React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。只能使用数值，不带任何单位。

 

　　4、加载图片的方式与原来不同。

　　在使用Image组件加载图片时，可分为网络图片和本地图片，如果是加载本地图片，使用require('string') 来包裹，string表示图片本地路径。

　　如果是加载网络图片，则使用uri:'string' ，string表示网络图片的地址。

　　

　　例如，要加载一幅网络图片，可以这样写：

?

<Image source={{uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=991823527,956610122&fm=27&gp=0.jpg'}} style={{width:200,height:180}}/>

　　

　　当然也可以这样写：

?

1 2 3 4 5 6 7

// render后： let pic = {  uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=991823527,956610122&fm=27&gp=0.jpg' };   // return后 <Image source={pic} style={{width:200,height:180}}/>

　　

　　加载本地图片：

<Image source={require('./images/105.jpg')} style={{width:200,height:180}} />

　　如果不限制尺寸，则显示图片的原始尺寸，此处与加载网络图片有所不同，可以不必规定图片尺寸，如果是加载网络图片，必须规定图片的宽高，否则图片不显示。

 

　　5、Image标签必须闭合，否则会报错