ScrollView
<li>一個(gè)包裝了平臺(tái)的ScrollView(滾動(dòng)視圖)的組件,同時(shí)還集成了觸摸鎖定的“響應(yīng)者”系統(tǒng)。
<li>記住ScrollView必須有一個(gè)確定的高度才能正常工作瞳筏,因?yàn)樗鼘?shí)際上所做的就是將一系列不確定高度的子組件裝進(jìn)一個(gè)確定高度的容器(通過滾動(dòng)操作)。要給一個(gè)ScrollView確定一個(gè)高度的話,要么直接給它設(shè)置高度(不建議)蜘犁,要么確定所有的父容器都已經(jīng)綁定了高度。在視圖棧的任意一個(gè)位置忘記使用{flex:1}都會(huì)導(dǎo)致錯(cuò)誤止邮,你可以使用元素查看器來查找問題的原因这橙。
<li>ScrollView內(nèi)部的其他響應(yīng)者尚無法阻止ScrollView本身成為響應(yīng)者。
官方例子
class ScrollViewSample extends Component {
render() {
return
<ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView>
}
}
屬性
contentContainerStyle
這些樣式會(huì)應(yīng)用到一個(gè)內(nèi)層的內(nèi)容容器上导披,所有的子視圖都會(huì)包裹在內(nèi)容容器內(nèi)屈扎。<a>PS:ScrollView組件的屬性不能用style來設(shè)置,必須用這個(gè)屬性名稱</a>
否則:
horizontal
當(dāng)此屬性為true的時(shí)候撩匕,所有的的子視圖會(huì)在水平方向上排成一行鹰晨,而不是默認(rèn)的在垂直方向上排成一列。默認(rèn)值為false止毕。
keyboardDismissMode
用戶拖拽滾動(dòng)視圖的時(shí)候模蜡,是否要隱藏軟鍵盤。
<li><a>none</a>(默認(rèn)值)扁凛,拖拽時(shí)不隱藏軟鍵盤哩牍。
<li><a>on-drag</a> 當(dāng)拖拽開始的時(shí)候隱藏軟鍵盤。
<li><a>interactive</a> 軟鍵盤伴隨拖拽操作同步地消失令漂,并且如果往上滑動(dòng)會(huì)恢復(fù)鍵盤膝昆。
安卓設(shè)備上不支持這個(gè)選項(xiàng),會(huì)表現(xiàn)的和none一樣叠必。
keyboardShouldPersistTaps
當(dāng)此屬性為false的時(shí)候荚孵,在軟鍵盤激活之后,點(diǎn)擊焦點(diǎn)文本輸入框以外的地方纬朝,鍵盤就會(huì)隱藏收叶。如果為true,滾動(dòng)視圖不會(huì)響應(yīng)點(diǎn)擊操作共苛,并且鍵盤不會(huì)自動(dòng)消失判没。默認(rèn)值為false
removeClippedSubviews
(實(shí)驗(yàn)特性):當(dāng)此屬性為true時(shí),屏幕之外的子視圖(子視圖的overflow樣式需要設(shè)為hidden)會(huì)被移除隅茎。這個(gè)可以提升大列表的滾動(dòng)性能澄峰。默認(rèn)值為true。
showsHorizontalScrollIndicator
當(dāng)此屬性為true的時(shí)候辟犀,顯示一個(gè)水平方向的滾動(dòng)條俏竞。
showsVerticalScrollIndicator
當(dāng)此屬性為true的時(shí)候,顯示一個(gè)垂直方向的滾動(dòng)條。
<a>Android</a> endFillColor color
有時(shí)候滾動(dòng)視圖會(huì)占據(jù)比實(shí)際內(nèi)容更多的空間魂毁。這種情況下可以使用此屬性玻佩,指定以某種顏色來填充多余的空間,以避免設(shè)置背景和創(chuàng)建不必要的繪制開銷席楚。一般情況下并不需要這種高級(jí)優(yōu)化技巧咬崔。
<a>iOS</a> alwaysBounceHorizontal bool
當(dāng)此屬性為true時(shí),水平方向即使內(nèi)容比滾動(dòng)視圖本身還要小烦秩,也可以彈性地拉動(dòng)一截垮斯。當(dāng)horizontal={true}時(shí)默認(rèn)值為true,否則為false闻镶。
<a>iOS</a> alwaysBounceVertical bool
當(dāng)此屬性為true時(shí)甚脉,垂直方向即使內(nèi)容比滾動(dòng)視圖本身還要小丸升,也可以彈性地拉動(dòng)一截铆农。當(dāng)horizontal={true}時(shí)默認(rèn)值為false,否則為true狡耻。
<a>iOS</a> automaticallyAdjustContentInsets bool
如果滾動(dòng)視圖放在一個(gè)導(dǎo)航條或者工具條后面的時(shí)候墩剖,iOS系統(tǒng)是否要自動(dòng)調(diào)整內(nèi)容的范圍。默認(rèn)值為true夷狰。(譯注:如果你的ScrollView或ListView的頭部出現(xiàn)莫名其妙的空白岭皂,嘗試將此屬性置為false)
<a>iOS</a> bounces bool
當(dāng)值為true時(shí),如果內(nèi)容范圍比滾動(dòng)視圖本身大沼头,在到達(dá)內(nèi)容末尾的時(shí)候爷绘,可以彈性地拉動(dòng)一截。如果為false进倍,尾部的所有彈性都會(huì)被禁用土至,即使alwaysBounce*屬性為true。默認(rèn)值為true猾昆。
<a>iOS</a> bouncesZoom bool
當(dāng)值為true時(shí)陶因,使用手勢(shì)縮放內(nèi)容可以超過min/max的限制,然后在手指抬起之后彈回min/max的縮放比例垂蜗。否則的話楷扬,縮放不能超過限制。
<a>iOS</a> canCancelContentTouches bool
當(dāng)值為false時(shí)贴见,一旦有子節(jié)點(diǎn)響應(yīng)觸摸操作烘苹,即使手指開始移動(dòng)也不會(huì)拖動(dòng)滾動(dòng)視圖。默認(rèn)值為true(在以上情況下可以拖動(dòng)滾動(dòng)視圖片部。)
<a>iOS</a> centerContent bool
當(dāng)值為true時(shí)螟加,如果滾動(dòng)視圖的內(nèi)容比視圖本身小,則會(huì)自動(dòng)把內(nèi)容居中放置。當(dāng)內(nèi)容比滾動(dòng)視圖大的時(shí)候捆探,此屬性沒有作用然爆。默認(rèn)值為false。
<a>iOS</a> contentInset {top: number, left: number, bottom: number, right: number}
內(nèi)容范圍相對(duì)滾動(dòng)視圖邊緣的坐標(biāo)黍图。默認(rèn)為{0, 0, 0, 0}曾雕。
<a>iOS</a> contentOffset PointPropType
用來手動(dòng)設(shè)置初始的滾動(dòng)坐標(biāo)。默認(rèn)值為{x: 0, y: 0}助被。
<a>iOS</a> decelerationRate number
一個(gè)浮點(diǎn)數(shù)剖张,用于決定當(dāng)用戶抬起手指之后,滾動(dòng)視圖減速停下的速度揩环。常見的選項(xiàng)有:
Normal: 0.998 (默認(rèn)值)
Fast: 0.9
<a>iOS</a> directionalLockEnabled bool
當(dāng)值為真時(shí)搔弄,滾動(dòng)視圖在拖拽的時(shí)候會(huì)鎖定只有垂直或水平方向可以滾動(dòng)。默認(rèn)值為false丰滑。
<a>iOS</a> maximumZoomScale number
允許的最大縮放比例顾犹。默認(rèn)值為1.0。
<a>iOS</a> minimumZoomScale number
允許的最小縮放比例褒墨。默認(rèn)值為1.0炫刷。
<a>iOS</a> onRefreshStart function
已過期
請(qǐng)使用refreshControl 屬性代替。
<a>iOS</a> onScrollAnimationEnd function
當(dāng)滾動(dòng)動(dòng)畫結(jié)束之后調(diào)用此回調(diào)郁妈。
pagingEnabled bool
當(dāng)值為true時(shí)浑玛,滾動(dòng)條會(huì)停在滾動(dòng)視圖的尺寸的整數(shù)倍位置。這個(gè)可以用在水平分頁上噩咪。默認(rèn)值為false顾彰。
<a>iOS</a> scrollEnabled bool
當(dāng)值為false的時(shí)候,內(nèi)容不能滾動(dòng)胃碾,默認(rèn)值為true涨享。
<a>iOS</a> scrollEventThrottle number
這個(gè)屬性控制在滾動(dòng)過程中,scroll事件被調(diào)用的頻率(單位是每秒事件數(shù)量)书在。更大的數(shù)值能夠更及時(shí)的跟蹤滾動(dòng)位置灰伟,不過可能會(huì)帶來性能問題,因?yàn)楦嗟男畔?huì)通過bridge傳遞儒旬。默認(rèn)值為0栏账,意味著每次視圖被滾動(dòng),scroll事件只會(huì)被調(diào)用一次栈源。
<a>iOS</a> scrollIndicatorInsets {top: number, left: number, bottom: number, right: number}
決定滾動(dòng)條距離視圖邊緣的坐標(biāo)挡爵。這個(gè)值應(yīng)該和contentInset一樣。默認(rèn)值為{0, 0, 0, 0}甚垦。
<a>iOS</a> scrollsToTop bool
當(dāng)此值為true時(shí)茶鹃,點(diǎn)擊狀態(tài)欄的時(shí)候視圖會(huì)滾動(dòng)到頂部涣雕。默認(rèn)值為true。
<a>iOS</a> snapToAlignment enum('start', "center", 'end')
當(dāng)設(shè)置了snapToInterval闭翩,snapToAlignment會(huì)定義停駐點(diǎn)與滾動(dòng)視圖之間的關(guān)系挣郭。
start (默認(rèn)) 會(huì)將停駐點(diǎn)對(duì)齊在左側(cè)(水平)或頂部(垂直)
center 會(huì)將停駐點(diǎn)對(duì)齊到中間
end 會(huì)將停駐點(diǎn)對(duì)齊到右側(cè)(水平)或底部(垂直)
<a>iOS</a> snapToInterval number
當(dāng)設(shè)置了此屬性時(shí),會(huì)讓滾動(dòng)視圖滾動(dòng)停止后疗韵,停止在snapToInterval的倍數(shù)的位置兑障。這可以在一些子視圖比滾動(dòng)視圖本身小的時(shí)候用于實(shí)現(xiàn)分頁顯示。與snapToAlignment組合使用蕉汪。
<a>iOS</a> stickyHeaderIndices [number]
一個(gè)子視圖下標(biāo)的數(shù)組流译,用于決定哪些成員會(huì)在滾動(dòng)之后固定在屏幕頂端。舉個(gè)例子者疤,傳遞stickyHeaderIndices={[0]}會(huì)讓第一個(gè)成員固定在滾動(dòng)視圖頂端福澡。這個(gè)屬性不能和horizontal={true}一起使用。
<a>iOS</a> zoomScale number
滾動(dòng)視圖內(nèi)容初始的縮放比例驹马。默認(rèn)值為1.0革砸。
方法
onScroll
在滾動(dòng)的過程中,每幀最多調(diào)用一次此回調(diào)函數(shù)窥翩。調(diào)用的頻率可以用scrollEventThrottle屬性來控制业岁。
onContentSizeChange
此函數(shù)會(huì)在ScrollView內(nèi)部可滾動(dòng)內(nèi)容的視圖發(fā)生變化時(shí)調(diào)用鳞仙。
調(diào)用參數(shù)為內(nèi)容視圖的寬和高:(contentWidth, contentHeight)
此方法是通過綁定在內(nèi)容容器上的onLayout來實(shí)現(xiàn)的寇蚊。
摘自:http://reactnative.cn/docs/0.27/getting-started.html#content