一個用於顯示多種不同類型圖片的React元件，包括網路圖片、靜態資源、暫時的本機圖片、以及本機磁碟上的圖片（如相簿）等。
從0.14版本開始，React Native提供了一個統一的方式來管理iOS和Android應用程式中的圖片。要在App中新增一個靜態圖片，只需把圖片檔案放在程式碼資料夾例如img中某處，然後像下面這樣去引用它：<Image source= {require('./img/check.png')} />
如果你有my-icon.ios.png和my-icon.android.png，Packager就會根據平台而選擇不同的文件。
你也可以使用@2x，@3x這樣的檔案名稱後綴，來為不同的螢幕精確度提供圖片。例如下面這樣的程式碼結構：
------ button.js
#------ img
------ |-------- check@2x.png
------ |-------- check@3x.p
Packager會打包所有的圖片並且依據螢幕精確度提供對應的資源。譬如說，iPhone 5s會使用check@2x.png，而Nexus 5上則會使用check@3x.png。如果沒有圖片恰好滿足螢幕分辨率，則會自動選取最接近的圖片。
【注意】如果你加入圖片的時候packager正在運行，可能需要重啟packager以便能正確引入新加入的圖片。為了讓新的圖片資源機制正常運作，require中的圖片名字必須是一個靜態字串,不能在require中進行拼接。
//正確<Image source={require('./my-icon.png')} />
#錯誤var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';<Image source={require('./' + icon + '.png')} />
如果你在寫一個混合App（一部分UI使用React Native，而另一部分使用平台原生程式碼），也可以使用已經打包到App中的圖片資源（透過Xcode的asset類別或Android的drawable資料夾打包）：<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
注意：此做法並沒有任何安全性檢查。你需要自己確保圖片在應用程式中確實存在，而且還需要指定尺寸。
與靜態資源不同的是，你需要手動指定圖片的尺寸。
//正確<Image source={{uri: 'https://facebook.github.io/react/img/logo_og. png'}}
style={{width: 400, height: 400}} />
//錯誤
##
在瀏覽器中，如果你不給圖片指定尺寸，那麼瀏覽器會先渲染一個0x0大小的元素佔位，然後下載圖片，在下載完成後再基於正確的尺寸來渲染圖片。這樣做的最大問題是UI會在圖片載入的過程中上下跳動，使得使用者體驗非常糟糕。
在React
Native中有意避免了這項行為。如此一來開發者就需要做更多工作來提前知曉遠端圖片的尺寸（或寬高比），但我們相信這樣可以帶來更好的使用者體驗。然而，從已經打包好的應用程式資源檔案中讀取圖片（使用require('image!x')語法）則無需指定尺寸，因為它們的尺寸在載入時就可以立刻知道。
例如這樣一個引用require('image!logo')的實際輸出結果可能是：{"__packager_asset":true,"isStatic" :true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}
#類似web中的背景圖（background-image），只需簡單地創建一個#return (
<Image source={...}>
<Text>Inside</Text>
</Image>
);
dependencies {
# // 如果你需要支援Android4.0(API level 14)之前的版本
compile 'com.facebook.fresco:animated-base-support:0.11.0'
# // 如果你需要支援GIF動圖
compile 'com.facebook.fresco:animated-gif:0.11.0'
# // 如果你需要支援WebP格式，包含WebP動圖
compile 'com.facebook.fresco:animated-webp:0.11.0'
compile 'com.facebook.fresco:webpsupport:0.11.0'
# // 如果只需要支援WebP格式而不需要動圖
compile 'com .facebook.fresco:webpsupport:0.11.0'
}
如果你在使用GIF的同時也使用了ProGuard，那麼需要在proguard-rules.pro中加入以下規則:-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, facebook.com.facebook. .core.ExecutorSupplier);
}
1.onLayout (function) 當Image佈局改變的，會進行呼叫該方法，呼叫的程式碼為:
{nativeEvent: {layout: {x, y, width, height}}}.
2.onLoad (function):當圖片載入成功之後，回呼此方法
3.onLoadEnd (function):當圖片載入失敗回呼該方法，不會管圖片載入成功還是失敗
4.onLoadStart (fcuntion):當圖片開始載入的時候呼叫該方法
5.resizeMode 縮放比例,可選參數('cover', 'contain', 'stretch') 當圖片的尺寸超過佈局的尺寸的時候，會根據設定Mode進行縮放或裁剪圖片
cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器視圖的尺寸（如果容器有padding內襯的話，則相應減去）。譯註：這樣圖片完全覆蓋甚至超出容器，容器中不留任何空白。
contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器視圖的尺寸（如果容器有padding內襯的話，則相應減去）。譯註：這樣圖片完全被包裹在容器中，容器中可能留有空白
stretch: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿容器。
repeat: 重複平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用。
center: 居中不拉伸。
6.source {uri:string} 進行標記圖片的引用，該參數可以為一個網路url位址或一個本地(使用require(相對路徑)來引用)的路徑
1.FlexBox 支援彈性盒子樣式
2.Transforms 支援屬性動畫 3.resizeMode 設定縮放模式
4.backgroundColor 背景顏色
5.borderColor 邊框顏色 6.borderWidth 邊框寬度#order#order##7.b#order#order#a.b#order#order
##order#order#C#order#order#CC#order#C
#C#order#C#白'
8.overflow 設定圖片尺寸超過容器可以設定顯示或隱藏('visible','hidden')
載入網路圖片的範例class MyImageDemo extends Component {
使成為（） {
返回 （
<myimage imgs="{imgs}"> </我的圖片>
</查看>
）；
}
}</myimage>
##class MyImage 擴充元件 {
構造函數（道具）{
超級（道具）；
這個.狀態 = {
count: 0,//圖片索引
imgs: this.props.imgs,
};
}＃＃＃＃＃＃＃＃＃＃＃＃＃＃使成為（） {
返回 （
#
##onPrevious() {
var count = this.state.count;
數數 - ;
如果（計數>= 0）{
this.setState({
計數：計數，
});
}
}
onNext() {
var count = this.state.count;
計數++；
if (count const 樣式 = StyleSheet.create({
柔性： {
彈性：1，
},
圖像： {
寬度：300，
高度：200，
邊框寬度：1，
justifyContent: '中心',
對齊項目：'居中'，
邊框顏色：'#ccc',
邊框半徑：5，
},
圖片：{
寬度：200，
身高：150，
},
按鈕：{
寬度：60，
身高：35，
邊框寬度：1，
邊框顏色：'#ccc',
邊框半徑：3，
justifyContent: '中心',
對齊項目：'居中'，
右邊距：30，
},
按鈕：{
flexDirection: '行',
邊距頂部：20，
justifyContent: '中心'
}
}
);
##效果
點選下一張
點選下一張
記錄我自己的RN學習，純粹屬於自己增值，有什麼不同的地方，一起討論進步#
以上是React-native 中Image控制項的簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！
