React-Native 之 图片加载 Image

最近初探React-Native,开始写一点自己的心得,今天第一天,跟大家介绍一个最最最简单的小控件。

那就是React-Native中最常用的,图片加载控件 <image>

<image>,没错,这货在android 里我门叫他 ImageView

用法非常简单。

好,身为程序猿。废话少说,贴代码:

一行代码,搞定android,ios双端本地图片加载。

本地图片的加载

<Image source={require('./my-icon.png')} />

注意:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串(不能使用变量!因为require是在编译时期执行,而非运行时期执行!)

// 正确
<Image source={require('./my-icon.png')} />

// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

太low了?对,太low了,我们来点高端的:

讲下网络图片的加载,从前我们在android中,是需要一个叫ImageLoader这位兄弟帮忙的,如今在我大RN之中,我只对你们说三个字:不需要!

image自带网络图片加载,并提供了丰富的参数满足你

网络图片

很多要在App中显示的图片并不能在编译的时候获得,又或者有时候需要动态载入来减少打包后的二进制文件的大小。这些时候,与静态资源不同的是,你需要手动指定图片的尺寸。同时我们强烈建议你使用https以满足iOS App Transport Security 的要求。

// 正确
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

// 错误
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />

你可以在Image组件的source属性中指定一些请求参数,如下面的示例:

<Image source={{
  uri: 'https://facebook.github.io/react/img/logo_og.png',
  method: 'POST',
  headers: {
    Pragma: 'no-cache'
  },
  body: 'Your Body goes here'
}}
style={{width: 400, height: 400}} />
嗯,还是太low,再来点高端的:

资源属性是一个对象(object)

在React Native中,另一个值得一提的变动是我们把src属性改为了source属性,而且并不接受字符串,正确的值是一个带有uri属性的对象。 

<Image source={{uri: 'something.jpg'}} />

注意,是uri,不是url,我的ios小伙伴就写了url,因为种种神秘机制在ios上没问题,到我大Android上就出不来了,好一顿找,此乃隐形天坑!

最后,说一个比较常用的属性,resizeMode

resizeMode

上面我们说了,Image组件必须在样式中声明图片的宽和高。如果没有声明,则图片将不会被呈现在界面上。
我们一般将Image定义的宽和高乘以当前运行环境的像素密度称为Image的实际宽高.当Image的实际宽、高与图片的实际宽、高不符时,视图片样式定义中resizeMode的取值不同而分为三种情况, 三个取值分别是:
contain, coverstretch.默认值是cover.

  1. cover模式只求在显示比例不失真的情况下填充整个显示区域。可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了。
  2. contain模式是要求显示整张图片, 可以对它进行等比缩小, 图片会显示完整,可能会露出Image控件的底色。 如果图片宽高都小于控件宽高,则不会对图片进行放大。
  3. stretch模式不考虑保持图片原来的宽,高比.填充整个Image定义的显示区域,这种模式显示的图片可能会畸形和失真。
  4. center模式, 9月11号的0.33版本才支持,contain模式基础上支持等比放大。

好了,关于React-Native的图片加载 <Image> 就说到这了。




牛逼吹完,打完收功。







                                                                                                                                                                                                                 ——   jeffrey

                                                                                                                                               欢迎转载

                                                                                                                                               欢迎吐槽

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭