React-native 中Image控制項的簡介

一.簡介

一個用於顯示多種不同類型圖片的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的圖片資源

如果你在寫一個混合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> );

在Android 上支援GIF和WebP格式的圖片

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')

###9.tintColor  顏色設定        10.opacity 設定不透明度0.0(透明)-1.0(完全不透明)######

四。 範例

載入網路圖片的範例
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: '中心'        }    } );

##效果

#Image_first.jpeg

點選下一張

##Image_second. jpeg

點選下一張

Image_third .jpeg#之路

記錄我自己的RN學習，純粹屬於自己增值，有什麼不同的地方，一起討論進步

#

以上是React-native 中Image控制項的簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！