基本用法
加载本地图片
<Image source={require('./img/baidu.png')}/>
加载App内资源图片
<Image source={{uri: 'ic_launcher'}} style={{width: 140,height: 140}} />
加载网络图片
<Image source={{uri:'http://172.17.137.68/heqiang/2.jpg'}} style={{width: 200,height: 200}}/>
适配不同平台
有时我们希望在不同平台之间用不同的图片
比如baidu.android.png，baidu.ios.png，代码中只需要写baidu.png，便可以适配android和ios平台
baidu@2x.png，baidu@3x.png还可以适配不同分辨率的机型。如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。这点是和Android中是类似的。
代码
import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text,View,Image } from 'react-native'; class HelloWorldAppp extends Component{ render() { console.log("render()"); return ( <View> <Text style={styles.title_text}>本地图片</Text> <Image source={require('./img/baidu.png')}/> <Text style={styles.title_text}>资源图片</Text> <Image source={{uri: 'ic_launcher'}} style={{width: 140,height: 140}} /> <Text style={styles.title_text}>网络图片</Text> <Image source={{uri:'http://*******.jpg'}} style={{width: 200,height: 200}}/> ); } } AppRegistry.registerComponent('AwesomeProject',() => HelloWorldAppp); const styles = StyleSheet.create({ title_text:{ fontSize:18,} });
效果图
回调函数和属性
<Image source={{uri:'http://172.17.137.68/heqiang/23.jpg'}} style={{width: 200,height: 200}}
onLoad={function(){console.log("onLoad");}}
onLayout={function(){console.log("onLayout");}}
onLoadStart={function(){console.log("onLoadStart");}}
onLoadEnd={function(){console.log("onLoadEnd");}}
/>
resizeMode
- cover：在显示比例不失真的情况下填充整个显示区域。可以对图片进行放大或者缩小，超出显示区域的部分不显示，也就是说，图片可能部分会显示不了。
- contain：要求显示整张图片，可以对它进行等比缩小，图片会显示完整，可能会露出Image控件的底色。如果图片宽高都小于控件宽高，则不会对图片进行放大。
- stretch：不考虑保持图片原来的宽高比，填充整个Image定义的显示区域，这种模式显示的图片可能会畸形和失真。
- center：居中不缩放
resizeMode也可以定义在style中，但在属性上定义的优先级比style中高。比如下面设置中最终生效的是Image.resizeMode.center。
<Image source={{uri:'http://172.17.137.68/heqiang/test.png'}} style={{width: 200,height: 200,backgroundColor: 'grey',resizeMode: Image.resizeMode.contain}} resizeMode={Image.resizeMode.center} />
