ReactNative 图片显示组件 Image

1 介绍

* resizeMode：表示内部图片的显示模式。enum(cover、contain、stretch)
* source：图片的引用地址，其值为 {uri:string}。如果是一个本地的静态资源，那么需要使用 require('string') 包裹。
* defaultSource：表示图片未加载完成时，使用的默认图片地址。（仅iOS支持）
* onLoadStart：加载开始时触发该事件（仅iOS支持）
* onProgress：加载过程的进度事件。（仅iOS支持）
* onLoad：加载成功时触发该事件。（仅iOS支持）
* onLoadEnd：不管是加载成功还是失败，都会触发该事件。（仅iOS支持）

2 加载网络图片

```
* 加载方式 <Image source={uri:'http://xxx.jpg'}  style={{width: 400, height: 400}}/>
* 需要指定宽和高才能正确显示
* 将Image组件图片适应模式设置为resizeMode='cotain' 这样图片就会在指定大小内自适应缩放。
* iOS中需设置 App Transport Security
```

3 加载本地图片

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

require中的图片名字必须是一个静态字符串

4 代码示例

/**
 * Created by licc on 2017/7/9.
 */

import React, {Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity
} from 'react-native';

import NavigationBar from './NavigationBar'

export default class ImageExample extends Component {

    constructor(props){

        super(props);

        this.state = {

            imgs : [
                'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2263582212.jpg',
                'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2265761240.jpg',
                'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2266110047.jpg'
            ],
            count : 0
        }
    }

    render(){
        return(
            <View style={styles.flex}>
                <NavigationBar
                    title={'图片'}
                    statusBar={{backgroundColor:'blue'}}
                />
                <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.doPrevious.bind(this)}>
                        <View style={styles.btn}>
                            <Text>上一张</Text>
                        </View>
                    </TouchableOpacity>
                </View>

                <View style={styles.btns}>
                    <TouchableOpacity onPress={this.doNext.bind(this)}>
                        <View style={styles.btn}>
                            <Text>下一张</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>

        );
    }

    doPrevious(){
        var count = this.state.count;
        count--;
        if (count >= 0) {
            this.setState({count:count});
        }
    }

    doNext(){
        var count = this.state.count;
        count++;
        if (count < this.state.imgs.length) {
            this.setState({count:count});
        }
    }
}

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