Image组件的常见属性：
-
- onLoad(function）:当图片加载成功后，回调该方法
- onLoadStart（function）:当图片开始加载的时候调用该方法
- onLoadEnd(function）:当图片加载结束回调该方法，不会管图片加载成功还是失败
- onLayout（function）:当 Image 布局发生变化会调用该方法
- resizeMode:缩放比例，（包含可选参数’cover’,‘contain’,‘stretch’）,当该图片的尺寸超过布局的尺寸时，会根据设置 Mode 进行缩放或剪裁图片
- source{uri:string}:进行标记图片引用，该参数可以为一个网络 URL地址 或者 一个本地路径
样式属性
1、没有设置width和height的情况下，默认为图片的宽高
/* 不设置尺寸的情况下 */
<Image source={require('./imgs/icon.png')} />
效果图：
2、设置width和height的情况下，尺寸图片的宽高
/* 设置尺寸的情况下 */
<View style={styles.container}>
<Image source={require('./imgs/icon.png')} />
<Image source={require('./imgs/icon.png')} style={styles.imgStyle} />
</View>
const styles = StyleSheet.create({ imgStyle:{ width:30,height:20,},container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',});
效果图：
3、加载网络图片
{/* uri是固定写法，后面跟上图片网络URL地址的字符串即可，还有，网络图片必须设置图片的大小，否则无法显示，一般还需要配合填充方式以达到想要的效果 */} <Image source={{uri:'http://avatar.csdn.net/5/F/0/1_zww1984774346.jpg'}} style={styles.imgStyle2}/>
效果图：
4、动态设置图片的宽与屏幕等宽
// 导入Dimensions库
var Dimensions = require('Dimensions');
export default class firstProgram extends Component {
render() {
// var movie = MOCKED_MOVIES_DATA[0];
return (
<View style={styles.container}>
<Image source={require('./imgs/icon.png')} />
<Image source={require('./imgs/icon.png')} style={styles.imgStyle} />
{/* uri是固定写法，后面跟上图片网络URL地址的字符串即可，还有，网络图片必须设置图片的大小，否则无法显示，一般还需要配合填充方式以达到想要的效果 */}
<Image source={{uri:'http://avatar.csdn.net/5/F/0/1_zww1984774346.jpg'}} style={styles.imgStyle2}></Image>
</View>
);
}
}
const styles = StyleSheet.create({
imgStyle:{
width:30,imgStyle2:{
// 设置背景颜色
backgroundColor:'green',// 设置宽度
width:Dimensions.get('window').width,// 设置高度
height:150
},container: {
flex: 1,});
AppRegistry.registerComponent('firstProgram',() => firstProgram);
效果图：
图片填充模式：
imgStyle2:{
// 设置背景颜色
backgroundColor:'green',// 设置宽度
width:Dimensions.get('window').width,// 设置高度
height:150
resizeMode:'cover'
}
imgStyle2:{
// 设置背景颜色
backgroundColor:'green',// 设置高度
height:150
resizeMode:'contain'
}
效果图：
- stretch：图片被拉伸至与容器大小一致，可能会发生变形
```
imgStyle2:{
// 设置背景颜色
backgroundColor:'green',// 设置高度
height:150
resizeMode:'stretch'
}
效果：
demo1：
import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,Image,Text,View,TabBarIOS,NavigatorIOS,ScrollView,TouchableHighlight
} from 'react-native';
// 导入Dimensions库
var Dimensions = require('Dimensions');
export default class firstProgram extends Component {
render() {
// var movie = MOCKED_MOVIES_DATA[0];
return (
<View style={styles.container}>
{/* 因为还没讲到listView,这边就用View代表Cell*/}
<View style={styles.cellStyle}>
{/* 头像 */}
<Image source={require('./imgs/2.png')} style={styles.imgStyle}></Image>
{/* 昵称 */}
<Text style={styles.nameStyle}>昵称</Text>
</View>
{/* 分隔线 */}
<View style={styles.lineStyle}></View>
<View style={styles.cellStyle}>
{/* 头像 */}
<Image source={require('./imgs/2.png')} style={styles.imgStyle}></Image>
{/* 出生日期 */}
<Text style={styles.nameStyle}>出生日期</Text>
</View>
{/* 分隔线 */}
<View style={styles.lineStyle}></View>
<View style={styles.cellStyle}>
{/* 头像 */}
<Image source={require('./imgs/2.png')} style={styles.imgStyle}></Image>
{/* 籍贯 */}
<Text style={styles.nameStyle}>籍贯</Text>
</View>
{/* 分隔线 */}
<View style={styles.lineStyle}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop:20,backgroundColor:'white',flex:1,// 设置换行方式
flexWrap:'wrap'
},cellStyle: {
// 尺寸
height:44,width:Dimensions.get('window').width,// 设置背景颜色
backgroundColor:'white',// 设置主轴方向
flexDirection:'row',// 设置侧轴对齐方式
alignItems:'center'
},imgStyle: {
width:30,height:30,// 设置图片填充模式
resizeMode:'cover',// 设置圆角
borderRadius:15,// 设置图片位置
marginLeft:10
},nameStyle: {
// 设置昵称位置
marginLeft:10
},lineStyle: {
// 背景色
backgroundColor:'black',// 设置尺寸
width:Dimensions.get('window').width,height:1
}
});
AppRegistry.registerComponent('firstProgram',() => firstProgram);
效果图：
