> [Image](http://facebook.github.io/react-native/docs/image.html#content) ## Image 展現圖片的控件 ## 屬性 | 名稱 | 類型 | 意義 | 默認值 | | --- | --- | --- | --- | | onLayout | function | 布局改變時調用該屬性設置的函數 | 無 | | resizeMode | enum | 當圖片和控件大小不匹配時采取什么規則來調整圖片(‘cover’, ‘contain’, ‘stretch’) | cover | | source | {uri:string}, number | 指定圖片資源 | 無 | | style | style | 樣式 | 無 | | testID | String | UI Automation 測試腳本中用到的id號 | 無 | | accessibilityLabel | String | (iOS特有)用戶可以通過該文本與Image控件交互 | 無 | | accessible | bool | (iOS特有)指代該控件是否是accessibility元素 | true | | capInsets | {top:number, left:number, bottom:number, right:number} | (iOS特有)調整圖片大小時，設置布局 | 無 | | defaultSource | {uri: string} | (iOS特有)當網絡斷開后，默認顯示的靜態圖片 | 無 | | onError | function | (iOS特有)當下載失敗后調用的函數 | 無 | | onLoad | function | (iOS特有)當完成調用加載函數后調用的函數 | 無 | | onLoadEnd | function | (iOS特有)完成加載后，成功或者失敗以后調用的函數 | 無 | | onLoadStart | function | (iOS特有)加載開始 | 無 | | onProgress | function | (iOS特有)加載中 | 無 | ## 實例 ## 網絡資源 ~~~ <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} /> ~~~ 最好設置下Image控件的尺寸，如果你不設置，可能顯示不出來。 ## 靜態資源 1.首先在項目的`Images.xcassets`文件夾下創建我們的圖片文件夾：  我取名為`logo.imageset`，后綴要以`imageset`結尾。把我們的圖片放到這個文件夾下：  **注意這個地方圖片的文件名要和文件夾的名字一致**。 2.這個時候我們回到Xcode中，點擊項目中`Images.xcassets`文件夾：  這個時候可以看到logo文件夾下的圖片，我們將圖片從Unassigned一欄拖到上面的`1x 2x 3x`隨意一欄中，然后重新build一下項目。? ? 3.在react-native項目中添加Image控件： ~~~ var React = require('react-native'); var { Image, AppRegistry, StyleSheet, View, } = React; var helloworld = React.createClass({ render: function() { return ( <Image source={ require('image!logo')} style={{width: 400, height: 400}}/> ); } }); var styles = StyleSheet.create({ }); AppRegistry.registerComponent('hellowrold',() => helloworld); ~~~ 從源碼中可以看出，導入靜態圖片的奇特之處在于使用`require`語句，將其作為模塊導入到Image控件中。 4.效果  ## Android 在Android版本下實驗通過，代碼一樣。