export default class App extends Component{
render(){
return(
<View style={styles.container}>
<Text>
加载项目中的图片
</Text>
<Image source={require('./img/oldDoctor.png')} style={styles.imageStyle} ></Image>
<Text>
加载App中的图片
</Text>
<Image source={{uri:'icon'}} style={styles.imageStyle}></Image>
<Text>
加载网络上的图片
</Text>
<Image source={{uri: 'http://e.hiphotos.baidu.com/image/pic/item/03087bf40ad162d9a62a929b1ddfa9ec8b13cd75.jpg'}} style={styles.imageStyle}></Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:'#F5FCFF',
justifyContent:'center',
alignItems:'center'
},
imageStyle:{
width:80,
height:80,
resizeMode:'contain',
}
});
resizeMode有四个值,默认是center,cover(适应性充满,有部分视图显示不出来),contain(可能会有Image组件的底色),stretch(使图片拉伸充满整个组件)