RN之Image

React Nativ之Image组件

一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。详细用法参阅图片文档。

加载的图片有两种来源，一种是本地图片，一种是网络图片。

加载本地图片：

image加载本地图片的方法比较简单，一般只需要设置source属性即可,例如：

render() {
  return (
    <View>
      <Image source={ requre('./image/xxx.png')}  style={styles.img}  />
    </View>
  );
}

在React-native开发中，加载本地图片是不允许使用字符串变量来制定与加载的图片地址，因为React native实在编译时处理所有的require声明，而不是在运行时动态的处理，所以下面的写法是错误的：

var imageadress = './image/xxx.png' ; 
class Demo extends Component {
  render() {
    return (
      <View>
        <Image source={ requre({imageadress})}  style={styles.img}  />
      </View>
    );
  }
}

加载网络图片

加载网络图片和加载本地图片的方法相似，唯一的区别就是网络图片的地址的网络地址，所以要在图片的网络地址前加上uri标签。因为是网络图片，所以事先加载时不知道其大小，所以在设置图片的属性是需要设置图片的大小。例如：

class Demo extends Component {
  render() {
    return (
      <View>
        <Image source={{uri: 'http://ww1.sinaimg.cn/large/0077HGE3gy1ftg5j3opqnj30dw0a845w.jpg'}}  style={{width:200 , height:200}} />
      </View>
    );
  }
}

加载网络图片是在运行时动态的处理的，所以加载网络图片是可以使用字符串变量来制定与加载的图片的地址，例如：

var pic = {uri: 'http://ww1.sinaimg.cn/large/0077HGE3gy1ftg5j3opqnj30dw0a845w.jpg'} ;

class Demo extends Component {
  render() {
    return (
      <View>
        <Image source={pic}  style={{width:200 , height:200}} />
      </View>
    );
  }
}

属性

resizeMode
当Image的实际宽、高与图片的实际宽、高符时，通常使用resizeMode来进行调整。resizeMode提供的属性之主要有3种：contain、cover和stretch。他们之间的主要区别如下：
cover：cover模式只求在现实比例不失真的情况下填充整个现实区域。可以对图片进行放大和缩小，超出显示不奋斗的区域不显示。
contain:contain模式要求显示整张图片，可以对他进行等比缩小。如果图片的宽、高都小于控件的宽、高，则不会的图片进行放大。
stretch：strech模式不考虑保持图片原来的宽高比，会填充整个Image定义的显示区域，这种模式下的图片可能会畸形或失真。

Image作为一个开发中经常使用的组件，他还有其他丰富的属性，详情请看官方文档之Image组件

方法 :

getSize：在显示图片之前获取图片的宽度（这个宽度是以像素为单位的）。如果图片地址不正确或下载失败，则此方法也会失败。

prefetch: 预加载一个远程图片（将其下载到本地磁盘缓存）。

最后编辑于：2018.07.25 19:43:40