React Native（iOS）新手小白零基础自学（六）Ima

基本属性：

1.resizeMode:枚举类型，其值为cover、contain、stretch。表示图片适应模式。
2.source：图片的引用地址，其值为{uri:string}。如果是一个本地的静态资源，那么需要使用
          require('image!name')包裹。
3.defaultSource：iOS支持的属性，表示默认的图片地址。如果网络图片加载完成，将取代defaultSource。
4.onLoad：iOS支持的属性，加载成功时触发该事件。
5.onLoadEnd：iOS支持的属性，不管是加载成功还是加载失败都会触发该事件。
6.onLoadStart：iOS支持的属性，加载开始时触发该事件。
7.onProgress：iOS支持的属性，加载过程的进度事件。

一、加载网络图片
以一个简单的图片浏览器为例：

屏幕快照 2016-05-09 下午2.13.52.png

var React = require('react-native');

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

var imgs = ['http://www.ituring.com.cn/bookcover/1442.796.jpg',
            'http://www.ituring.com.cn/bookcover/1668.553.jpg',
            'http://www.ituring.com.cn/bookcover/1521.260.jpg'];

var MyImage = React.createClass ({

  getInitialState: function() {
    var imgs = this.props.imgs;
    return {
      imgs:imgs,
      count:0
    };
  },

  goPreView: function() {
    var count = this.state.count;
    count--;
    if (count >= 0) {
      this.setState({
        count:count
      });
    }
    if (count == -1) {
      this.setState({
        count:imgs.length - 1
      });
    }
  },

  goNextView: function() {
    var count = this.state.count;
    count++;
    if (count < imgs.length) {
      this.setState({
        count:count
      });
    }
    if (count == imgs.length) {
      this.setState({
        count:0
      });
    }
  },

  render: function() {
    return(
      <View style={styles.flex}>

        <View style={styles.image}>
          <Image style={styles.img}
                 source={{uri:this.state.imgs[this.state.count]}}
                 resizeMode="contain"
          />
        </View>

        <View style={styles.btns}>
          <TouchableOpacity onPress={this.goPreView}>
            <View style={styles.btn}>
              <Text>上一张</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity onPress={this.goNextView}>
            <View style={styles.btn}>
              <Text>下一张</Text>
            </View>
          </TouchableOpacity>
        </View>

      </View>
    );
  },
});


var IMG = React.createClass ({
  render: function() {
    return(
      <View style={[styles.flex, {marginTop:40}]}>
        <MyImage imgs = {imgs}></MyImage>
      </View>
    );
  },
});

var styles = StyleSheet.create ({
  flex: {
    flex:1,
    alignItems:'center'
  },
  image: {
    borderWidth:1,
    borderColor:'#ccc',
    width:300,
    height:200,
    borderRadius:5,
    justifyContent:'center',
    alignItems:'center'
  },
  img: {
    height:150,
    width:200
  },
  btns: {
    flexDirection:'row',
    justifyContent:'center',
    marginTop:20
  },
  btn: {
    width:60,
    height:30,
    borderWidth:1,
    borderColor:'#0089FF',
    justifyContent:'center',
    alignItems:'center',
    borderRadius:3,
    marginRight:20
  }
});

AppRegistry.registerComponent('InformationServicesRN', () => IMG);

二、加载本地图片
React Native建议使用1和2的加载方式，而不希望使用方式3在运行时才分析静态资源

//好的加载方式
1.<Image source={require('image!my-icon')}/>
2.var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive')
  <Image source={icon}/>
//不好的加载方式
3.var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
  <Image source={require('image!' + icon)}/>