ReactNative 圖片顯示組件 Image

1 介紹

* resizeMode：表示內(nèi)部圖片的顯示模式眶根。enum(cover蜀铲、contain、stretch)
* source：圖片的引用地址属百，其值為 {uri:string}记劝。如果是一個(gè)本地的靜態(tài)資源，那么需要使用 require('string') 包裹族扰。
* defaultSource：表示圖片未加載完成時(shí)厌丑，使用的默認(rèn)圖片地址。（僅iOS支持）
* onLoadStart：加載開始時(shí)觸發(fā)該事件（僅iOS支持）
* onProgress：加載過(guò)程的進(jìn)度事件渔呵。（僅iOS支持）
* onLoad：加載成功時(shí)觸發(fā)該事件怒竿。（僅iOS支持）
* onLoadEnd：不管是加載成功還是失敗，都會(huì)觸發(fā)該事件扩氢。（僅iOS支持）

2 加載網(wǎng)絡(luò)圖片

```
* 加載方式 <Image source={uri:'http://xxx.jpg'}  style={{width: 400, height: 400}}/>
* 需要指定寬和高才能正確顯示
* 將Image組件圖片適應(yīng)模式設(shè)置為resizeMode='cotain' 這樣圖片就會(huì)在指定大小內(nèi)自適應(yīng)縮放耕驰。
* iOS中需設(shè)置 App Transport Security
```

3 加載本地圖片

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

require中的圖片名字必須是一個(gè)靜態(tài)字符串

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,
    },
});