react-native图片组件的使用

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

快速开始

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

react-native init secondProject
react-native android
react-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，同样，可以提供[email protected]和[email protected]，此时Packager会根据不同的屏幕分辨率，加载显示不同的图片。

Image组件的样式

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

Flexbox...  弹性盒

Transforms...  表示显示的缩放，旋转，倾斜等属性

resizeMode Object.keys(ImageResizeMode)

backgroundColor string  背景色

borderColor string   边框颜色

borderWidth number  边框宽度

borderRadius number  边框四角的圆角半径

overflow enum('visible', 'hidden') 

tintColor string

opacity 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，今天就到这里了，希望自己能坚持下去。