react-native图片组件的使用

今天学习react-native图片组件，在react中，为我们提供了一个Image组件用来显示多种不同类型图片，包括了网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片等

快速开始

下面我创建一个叫做secondProject的工程用来学习Image组件。

react-native init secondProjectreact-native androidreact-native run-android

上面三条命令运行完成之后，就会编译安装并且运行到模拟器上。拷贝一张本地图片值secondProject里，如下:

编辑index.android.js

打开index.android.js文件

• 注册Image组件，默认没有Image组件，所以需要我们自己注册

var {  AppRegistry,  StyleSheet,  Text,  View,  Image,} = React;

• 使用Image组件
  Image组件的基本使用如下：

//网络上的图片，需要注意网络上的图片，必须指定显示的大小，才可以显示<Image source={{uri: 'something.jpg'}} />//本地图片<Image source={require('./something.jpg')} />

var secondProject = React.createClass({  render: function() {  return (    <View>      <Image        style={styles.icon}        source={require('./hello.jpg')}      />      <Image        style={styles.logo}        source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}      />    </View>  );},});

这里，我显示了两张图片，分别是项目中的图片，以及网络中的一张react native的logo，可以发现：

1. 图片的样式通过style属性指定
2. 图片的路径通过source属性指定

创建styles样式

var styles = StyleSheet.create({  icon: {    width: 300,    height: 400,  },  logo: {    width: 200,    height: 200,  },});

这里的样式比较简单，只是设置了图片的宽度和高度，此时，点击menu->reload js,效果如下：

小结：

• 可以看到，在react native中将src属性变成了source属性，来指定图片的路径。
• 对于本地图片，可以不指定其显示的大小，此时会显示图片本身的大小，对于网络上的图片，需要通过style来指定其显示的大小，否则无法显示。

图片的嵌套

另外我们也可以像在android中那样来为某一些文本设置背景图片，如下：

<View>      <Image        source={require('./hello.jpg')} >        <Text style={{fontSize: 50, color: 'red',}}>HELLO WORLD</Text>      </Image></View>

这里我为显示”HELLO WORLD”组件指定了字体大小和字体颜色，效果如下：

这里由于我们在Text组件中fontColor样式写错了，实际并没有该样式，可以看到此时react也在警告，并提供科学的用法：

它提示将样式写入到styles对象中，并且提供了Text组件可用的其他样式属性。
完整代码如下：

'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  View,  Image,} = React;var secondProject = React.createClass({  render: function() {  return (    <View>      <Image        source={require('./hello.jpg')} >        <Text style={styles.fontstyle}>HELLO WORLD</Text>      </Image>    </View>  );},});var styles = StyleSheet.create({  fontstyle: {    fontSize: 60,     color: "blue",  },});AppRegistry.registerComponent('secondProject', () => secondProject);

不同平台的适配

对于图片的显示，react在不同的平台也进行了适配，具体如下：

<Image source={require('./something.jpg')} />

这里加载了一张本地的当前目录”something.jpg”图片。此时Packager会在该组件所在的当前目录下查找叫做”something.jpg”的图片来显示，如果需要根据不同的平台加载不同图片，比如：IOS和Android，只需要添加something.ios.jpg 和something.android.jpg即可 ，Packager会根据不同的平台来选择加载显示不同的图片。

不同屏幕大小的适配

<Image source={require('./screen.png')} />

上面加载显示了screen.png，同样，可以提供[e-mail]和[e-mail]，此时Packager会根据不同的屏幕分辨率，加载显示不同的图片。

Image组件的样式

Image组件有如下样式，可以用来设置其显示的样子

Flexbox...  弹性盒Transforms...  表示显示的缩放，旋转，倾斜等属性resizeMode Object.keys(ImageResizeMode)backgroundColor string  背景色borderColor string   边框颜色borderWidth number  边框宽度borderRadius number  边框四角的圆角半径overflow enum('visible', 'hidden') tintColor stringopacity number  透明度，从0 - 1

这里，我简单写个栗子：

var secondProject = React.createClass({  render: function() {  return (    <View>      <Image        source={require('./hello.jpg')}        style={styles.imagestyle}         >        <Text style={styles.fontstyle}>HELLO WORLD</Text>      </Image>    </View>  );},});var styles = StyleSheet.create({  fontstyle: {    fontSize: 60,     color: "blue",  },  imagestyle: {    flex: 1,    transform: [{rotate: "180deg"},],    borderColor: "red",    borderWidth: 20,    borderRadius: 20,    overflow:'visible',    opacity: 0.5,  }});

此时效果如下：

Image组件属性

onLayout function 当元素挂载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}.onLoad function 加载成功完成时调用此回调函数。onLoadEnd function 加载结束后，不论成功还是失败，调用此回调函数。onLoadStart function 加载开始时调用。resizeMode enum('cover', 'contain', 'stretch') 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白stretch: 拉伸图片，填满父容器，不在考虑宽高比source {uri: string}, number uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。

下面看个栗子：

var secondProject = React.createClass({    getInitialState: function() {    return {      error: false,      loading: false,      progress: 0    };  },  render: function() {  var loader = this.state.loading ?      <View style={styles.progress}>        <Text>{this.state.progress}%</Text>      </View> : null;    return this.state.error ?      <Text>{this.state.error}</Text> :      <Image        source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}        style={{width: 200,height: 200,}}        onLoadStart={(e) => this.setState({loading: true})}        onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})}        onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})}        onLoad={() => this.setState({loading: false, error: false})}>        {loader}      </Image>;},});

这里由于网络加载一张图片是很快的，因此，很难看到实际的运行结果，包括显示当前加载进度文字，或者下载出错，显示的错误信息等。

ok，今天就到这里了，希望自己能坚持下去。