React Native 基础组件之 Image
用于显示多种不同类型图片的 React 组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。
属性
| name | type | desc |
|---|---|---|
| onLayout | function | 布局发生变化时调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}. |
| onLoad | function | 图片加载成功时回调该方法。 |
| onLoadEnd | function | 加载结束后，不管成功与否，都回调该方法。 |
| onLoadStart | function | 顾名思义，加载开始时调用。 |
| resizeMode | enum(‘cover’, ‘contain’, ‘stretch’) | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。 |
| source | {uri: string} | uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。 |
Style
| name | value | desc |
|---|---|---|
| backfaceVisibility | [‘visible’, ‘hidden’] | 隐藏或者显示 |
| backgroundColor | color | 背景色 |
| borderBottomLeftRadius | number | 左下角圆角大小 |
| borderBottomRightRadius | number | 右下角圆角大小 |
| borderColor | color | 边框颜色 |
| borderRadius | number | 边框圆角 |
| borderTopLeftRadius | number | 左上角圆角大小 |
| borderTopRightRadius | number | 右下角圆角大小 |
| borderWidth | number | 边框宽度 |
| opacity | [0.0-1.0] | 设置透明度 |
| overflow | [‘visible’, ‘hidden’] | 设置图片尺寸超过容器可以设置显示或者隐藏 |
| tintColor | color | 颜色设置 |
| overlayColor | color | 当图片圆角显示时，剩余空间设置的颜色，android独有 |
| resizeMode | enum(‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’) | 设置缩放模式 |
实例
1.加载本地图片和加载网络图片
代码：
import React, {Component} from 'react';
import {StyleSheet, Image, View,Text} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Image
source = {require('./img/cat.png')}
/>
<Text>这是本地图片</Text>
<Image
style = {styles.image}
source = {{uri:'http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/01/qrcode_for_gh_c6208faa1f42_430.jpg'}}
/>
<Text>这是网络图片</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
image: {
height: 50,
width: 50
}
});
效果图：