1. 程式人生 > >ReactNative Image控制元件屬性和樣式

ReactNative Image控制元件屬性和樣式

用法

載入本地圖片

<Image source={require('./img/baidu.png')}/>

載入App內資源圖片

<Image source={{uri: 'ic_launcher'}} />

載入網路圖片

<Image source={{uri:'http://172.17.137.68/heqiang/2.jpg'}} style={{width: 200, height: 200}}/>

屬性方法

onLayout:

layout時呼叫,與View元件的onLayout函式類似

onLoadStart:

開始載入時呼叫

onLoadEnd

載入結束時呼叫

onLoad:

成功讀取圖片時呼叫

resizeMode

  • cover:在顯示比例不失真的情況下填充整個顯示區域。可以對圖片進行放大或者縮小,超出顯示區域的部分不顯示,也就是說,圖片可能部分會顯示不了。
  • contain:要求顯示整張圖片,可以對它進行等比縮小,圖片會顯示完整,可能會露出Image控制元件的底色。如果圖片寬高都小於控制元件寬高,則不會對圖片進行放大。
  • stretch:不考慮保持圖片原來的寬高比,填充整個Image定義的顯示區域,這種模式顯示的圖片可能會畸形和失真。
  • center:居中不縮放

source {uri:string}

進行標記圖片的引用,該引數可以為一個網路url地址或者一個本地的路徑

樣式

FlexBox

支援彈性盒子風格

Transforms

支援屬性動畫

resizeMode

設定縮放模式

backgroundColor

背景顏色

borderColor

邊框顏色

borderWidth

邊框寬度

borderRadius

邊框圓角

overflow

設定圖片尺寸超過容器可以設定顯示或者隱藏(‘visible’,’hidden’)

tintColor

顏色設定

opacity

設定不透明度0.0(透明)-1.0(完全不透明)