ReactNative Image控制元件屬性和樣式
阿新 • • 發佈:2019-02-05
用法
載入本地圖片
<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(完全不透明)