Image,通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源。
一、Image组件的基本用法
1.1 从当前项目中加载图片
要往App中添加一个静态图片,只需把图片文件放在代码文件夹中某处,然后像下面这样去引用它:
<Image source={require('./my-icon.png')} /> 即:
<View style={styles.container}>
{/*从项目中加载图片*/}
<Text>从项目中加载图片</Text>
// 在imageStyle中指定宽高
<Image source={require('./img/icon.png')} style={styles.imageStyle} />
该图片资源文件的查找和JS模块相似,该会根据填写的图片路径相对于当前的js文件路径进行搜索。
此外,React Naive的Packager会根据平台选择相应的文件,例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios),会分别根据android或者ios平台选择相应的文件。
你还可以使用@2x,@3x这样的文件名后缀,来为不同的屏幕精度提供图片。比如下面这样的代码结构:
.
├── button.js
└── img
├── check@2x.png
└── check@3x.png
并且button.js里有这样的代码:
<Image source={require('./img/check.png')} />
Packager会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说,iPhone 5s会使用check@2x.png,而Nexus 5上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率,则会自动选中最接近的一个图片。
注意:如果你添加图片的时候packager正在运行,可能需要重启packager以便能正确引入新添加的图片。
这样会带来如下的一些好处:
- iOS和Android一致的文件系统。
- 图片和JS代码处在相同的文件夹,这样组件就可以包含自己所用的图片而不用单独去设置。
- 不需要全局命名。你不用再担心图片名字的冲突问题了。
- 只有实际被用到(即被require)的图片才会被打包到你的app。
- 现在在开发期间,增加和修改图片不需要重新编译了,只要和修改js代码一样刷新你的模拟器就可以了。
- 与访问网络图片相比,Packager可以得知图片大小了,不需要在代码里再声明一遍尺寸。
- 现在通过npm来分发组件或库可以包含图片了。
另一种写法:// 错误 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} />
1.2 加载使用APP中的图片
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
{/*从资源包中加载图片*/} <Text>2.从APP中加载图片</Text> <Image source={{uri:'icon_a'}} style={styles.imageStyle} />
使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹)
注意:这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在,而且还需要指定尺寸。
为什么不在所有情况下都自动指定尺寸呢?在浏览器中,如果你不给图片指定尺寸,那么浏览器会首先渲染一个0x0大小的元素占位,然后下载图片,在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是UI会在图片加载的过程中上下跳动,使得用户体验非常糟糕。
在React Native中我们有意避免了这一行为。可以从已经打包好的应用资源文件中读取图片(使用require('image!x')语法)则无需指定尺寸,因为它们的尺寸在加载时就可以立刻知道。
{/*从资源包中加载图片--另一种方式*/} <Text>4.从APP中加载图片</Text> <Image source={require('image!icon_a')} style={styles.imageStyle} />
比如这样一个引用require('image!logo')的实际输出结果可能是:
{"__packager_asset":true,"isStatic":true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}
1.3 加载来自网络的图片
客户端的很多图片资源基本上都是实时通过网络进行获取的,写法和上面的加载本地资源图片的方式不太一样,这边一定需要指定图片的尺寸大小,实现如下:
{/*从网络中加载图片*/} <Text>3.从网络中加载图片</Text> <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}} style={styles.imageStyle} />
1.4 设置图片为背景
<Image source={{uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg
'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.stretch}}><Text style={{marginTop: 60, backgroundColor: 'red'}}>下面是背景图片</Text>
</Image>
通过嵌套来实现背景图片
开发者们常面对的一种需求就是类似web中的背景图(background-image)。要实现这一用例,只需简单地创建一个<Image>组件,然后把需要背景图的子组件嵌入其中即可。
示例代码:return ( <Image source={...}> <Text>Inside</Text> </Image> );
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; /*********** 背景图片示例****************/ export default class ImageDemoA extends Component { render() { return ( <View style={styles.container}> <Image style={styles.backgroundImage} source={{uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}> <View style={styles.overlay}> <Text style={styles.overlayHeader}>水果水果</Text> <Text style={styles.overlaySubHeader}>有什么呢</Text> </View> </Image> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', backgroundColor: '#F5FCFF', paddingTop:30 }, image:{ width:100, height:140, margin:6 }, backgroundImage:{ flex:1, //背景图像的缩放类型: 包含(contain),拉伸(stretch) resizeMode:'cover' }, overlay:{ backgroundColor:'rgba(0,0,0,0.3)', alignItems:'center' }, overlayHeader:{ fontSize:33, fontFamily:'Helvetica Neue', fontWeight:'200', color:'#eae7ff', padding:10 }, overlaySubHeader:{ fontSize:15, fontFamily:'Helvetica Neue', fontWeight:'200', color:'#eae7ff', padding:10, paddingTop:0 } }); AppRegistry.registerComponent('ImageDemoA', () => ImageDemoA);
二、Image组件的常见属性
2.1 属性方法
onLayout(function)
当Image布局发生改变的,会进行调用该方法,调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.
onLoad (function)
当图片加载成功之后,回调该方法
onLoadEnd (function)
当图片加载失败回调该方法,该不会管图片加载成功还是失败
onLoadStart (fcuntion)
当图片开始加载的时候调用该方法
resizeMode
缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候,会根据设置Mode进行缩放或者裁剪图片
resizeMode这样一个属性,这个属性的作用相当于OC中设置图片的内容模式。
Image.resizeMode.cover:图片居中显示,没有被拉伸,超出部分被截断;
Image.resizeMode.contain:容器完全容纳图片,图片等比例进拉伸;
Image.resizeMode.stretch: 图片被拉伸适应容器大小,有可能会发生变形。
source{uri:string}
进行标记图片的引用,该参数可以为一个网络url地址或者一个本地的路径
2.2 样式风格属性
FlexBox 支持弹性盒子风格
Transforms 支持属性动画
backgroundColor 背景颜色
borderColor 边框颜色
borderWidth 边框宽度
borderRadius 边框圆角
overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')
tintColor 颜色设置
opacity 设置不透明度0.0(透明)-1.0(完全不透明)
iOS边框圆角的注意事项
请注意下列边框圆角样式目前在iOS的图片组件上还不支持:
borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
最合适的相册图片
iOS会为同一张图片在相册中保存多个不同尺寸的副本。为了性能考虑,从这些副本中挑出最合适的尺寸显得尤为重要。对于一处200x200大小的缩略图,显然不应该选择最高质量的3264x2448大小的图片。如果恰好有匹配的尺寸,那么React Native会自动为你选好。如果没有,则会选择最接近的尺寸进行缩放,但也至少缩放到比所需尺寸大出50%,以使图片看起来仍然足够清晰。这一切过程都是自动完成的,所以你不用操心自己去完成这些繁琐且易错的代码。
资源属性是一个对象(object)
在React Native中,另一个值得一提的变动是我们把src属性改为了source属性,而且并不接受字符串,正确的值是一个带有uri属性的对象。
<Image source={{uri: 'something.jpg'}} />
深层次的考虑是,这样可以使我们在对象中添加一些元数据(metadata)。假设你在使用require('./my-icon.png'),那么我们就会在其中添加真实文件路径以及尺寸等信息(这只是举个例子,未来的版本中require的具体行为可能会变化)。此外这也是考虑了未来的扩展性,比如我们可能会加入精灵图(sprites)的支持:在输出{uri: ...}的基础上,我们可以进一步输出裁切信息{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}},这样理论上就可以在现有的代码中无缝支持精灵图的切分。
对于开发者来说,则可以在其中标注一些有用的属性,例如图片的尺寸,这样可以使图片自己去计算将要显示的尺寸(而不必在样式中写死)。请在这一数据结构中自由发挥,存储你可能需要的任何图片相关的信息。
在主线程外解码图片
图片解码有可能会需要超过一帧的时间。在web上这是页面掉帧的一大因素,因为解码是在主线程中完成的。然而在React Native中,图片解码则是在另一线程中完成的。在实际开发中,一般对图片还没下载完成时的场景都做了处理(添加loading等),而图片解码时显示的占位符只占用几帧时间,并不需要你改动代码去额外处理。