Image是顯示圖片的元件。可以載入網路圖片、靜態資源、臨時的本地圖片、以及本地磁碟上的圖片。本地磁碟上的圖片需要在路徑前加 ‘file://’。

resizeMode：元件尺寸和圖片尺寸不成比例的時候調整圖片的大小

• cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器檢視的尺寸（如果容器有padding內襯的話，則相應減去）。譯註：這樣圖片完全覆蓋甚至超出容器，容器中不留任何空白。

• contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器檢視的尺寸（如果容器有padding內襯的話，則相應減去）。譯註：這樣圖片完全被包裹在容器中，容器中可能留有空白

• stretch: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿容器。

• repeat: 重複平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用。

• center: 居中不拉伸。

source：圖片資源
opacity：透明度
blurRadius：模糊半徑

Demo

/**
 * Created by on 2017/4/19.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Image,
    ScrollView,
    Text,
    Button,
} from 'react-native';

export default class ImageDemo extends Component {
    static navigationOptions = {
        title: 'Image',
    };
    state={
        resizeMode:'cover'
    }
    render() {
        return (
            <ScrollView
 
>
                <View>
                    <Image source={require('../../imgs/s99.png')}/>
                    <View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>
                        <Text>設定resizeMode：</Text>
                        <Button title
 
='cover' onPress={()=>{this.setState({resizeMode:'cover'})}}/>
                        <Button title='contain' onPress={()=>{this.setState({resizeMode:'contain'})}}/>
                        <Button title='stretch' onPress={()=>{this.setState({resizeMode:'stretch'})}}/>
                        <Button title='repeat' onPress={()=>{this.setState({resizeMode:'repeat'})}}/>
                        <Button title='center' onPress={()=>{this.setState({resizeMode:'center'})}}/>
                    </View>
                    <Image style={{height:100,width:100}} source={require('../../imgs/s63.png')} resizeMode={this.state.resizeMode}/>

                    <Image style={{height:100,width:100,opacity:0.5}} source={require('../../imgs/s63.png')} />

                    <Image style={{height:100,width:100}} source={require('../../imgs/s63.png')} blurRadius={30}/>

                    <Image  source={{uri: 'http://h5.86.cc/walls/20141217/mid_23b73a6904487a6.jpg'}} />

                </View>
            </ScrollView>

        );
    }
}