ScrollView組件
a)ScrollView必須有一個(gè)確定的高度才能正常工作
b)ScrollView內(nèi)部的其他響應(yīng)者尚無法阻止****ScrollView****本身成為響應(yīng)者
屬性方法
- contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
這些樣式會(huì)應(yīng)用到一個(gè)內(nèi)層的內(nèi)容容器上跪者,所有的子視圖都會(huì)包裹在內(nèi)容容器內(nèi)华嘹。
- horizontal bool 當(dāng)此屬性為true的時(shí)候纳猪,所有的的子視圖會(huì)在水平方向上排成一行翼悴,而不是默認(rèn)的在垂直方向上排成一列惭聂。默認(rèn)值為false弥奸。
- keyboardDismissMode enum('none', "interactive", 'on-drag') 用戶拖拽滾動(dòng)視圖的時(shí)候蛤克,是否要隱藏軟鍵盤。安卓設(shè)備上不支持這個(gè)選項(xiàng)闷祥,會(huì)表現(xiàn)的和none一樣娱颊。
· none(默認(rèn)值),拖拽時(shí)不隱藏軟鍵盤凯砍。
· on-drag 當(dāng)拖拽開始的時(shí)候隱藏軟鍵盤箱硕。
· interactive 軟鍵盤伴隨拖拽操作同步地消失,并且如果往上滑動(dòng)會(huì)恢復(fù)鍵盤果覆。
- keyboardShouldPersistTaps bool 當(dāng)此屬性為false的時(shí)候颅痊,在軟鍵盤激活之后,點(diǎn)擊焦點(diǎn)文本輸入框以外的地方局待,鍵盤就會(huì)隱藏斑响。如果為true,滾動(dòng)視圖不會(huì)響應(yīng)點(diǎn)擊操作钳榨,并且鍵盤不會(huì)自動(dòng)消失舰罚。默認(rèn)值為false。
- onScroll function 在滾動(dòng)的過程中薛耻,每幀最多調(diào)用一次此回調(diào)函數(shù)营罢。調(diào)用的頻率可以用scrollEventThrottle屬性來控制。
- refreshControl element 指定RefreshControl組件,用于為ScrollView提供下拉刷新功能饲漾。
- removeClippedSubviews bool (實(shí)驗(yàn)特性):當(dāng)此屬性為true時(shí)蝙搔,屏幕之外的子視圖(子視圖的overflow樣式需要設(shè)為hidden)會(huì)被移除。這個(gè)可以提升大列表的滾動(dòng)性能考传。默認(rèn)值為true吃型。
- showsHorizontalScrollIndicator bool 當(dāng)此屬性為true的時(shí)候,顯示一個(gè)水平方向的滾動(dòng)條僚楞。
- showsVerticalScrollIndicator bool 當(dāng)此屬性為true的時(shí)候勤晚,顯示一個(gè)垂直方向的滾動(dòng)條。
- alwaysBounceHorizontal bool 當(dāng)此屬性為true時(shí)泉褐,水平方向即使內(nèi)容比滾動(dòng)視圖本身還要小赐写,也可以彈性地拉動(dòng)一截。當(dāng)horizontal={true}時(shí)默認(rèn)值為true膜赃,否則為false挺邀。
- iosalwaysBounceVertical bool 當(dāng)此屬性為true時(shí),垂直方向即使內(nèi)容比滾動(dòng)視圖本身還要小财剖,也可以彈性地拉動(dòng)一截悠夯。當(dāng)horizontal={true}時(shí)默認(rèn)值為false,否則為true躺坟。
- iosautomaticallyAdjustContentInsets bool 如果滾動(dòng)視圖放在一個(gè)導(dǎo)航條或者工具條后面的時(shí)候,iOS系統(tǒng)是否要自動(dòng)調(diào)整內(nèi)容的范圍乳蓄。默認(rèn)值為true咪橙。(譯注:如果你的ScrollView或ListView的頭部出現(xiàn)莫名其妙的空白,嘗試將此屬性置為false)
- iosbounces bool 當(dāng)值為true時(shí)虚倒,如果內(nèi)容范圍比滾動(dòng)視圖本身大美侦,在到達(dá)內(nèi)容末尾的時(shí)候,可以彈性地拉動(dòng)一截魂奥。如果為false菠剩,尾部的所有彈性都會(huì)被禁用,即使alwaysBounce*屬性為true耻煤。默認(rèn)值為true具壮。
- iosbouncesZoom bool 當(dāng)值為true時(shí),使用手勢(shì)縮放內(nèi)容可以超過min/max的限制哈蝇,然后在手指抬起之后彈回min/max的縮放比例棺妓。否則的話,縮放不能超過限制炮赦。
- ioscanCancelContentTouches bool 當(dāng)值為false時(shí)怜跑,一旦有子節(jié)點(diǎn)響應(yīng)觸摸操作,即使手指開始移動(dòng)也不會(huì)拖動(dòng)滾動(dòng)視圖吠勘。默認(rèn)值為true(在以上情況下可以拖動(dòng)滾動(dòng)視圖性芬。)
- ioscenterContent bool 當(dāng)值為true時(shí)峡眶,如果滾動(dòng)視圖的內(nèi)容比視圖本身小,則會(huì)自動(dòng)把內(nèi)容居中放置植锉。當(dāng)內(nèi)容比滾動(dòng)視圖大的時(shí)候辫樱,此屬性沒有作用。默認(rèn)值為false汽煮。
ioscontentInset {top: number, left: number, bottom: number, right: number}
內(nèi)容范圍相對(duì)滾動(dòng)視圖邊緣的坐標(biāo)搏熄。默認(rèn)為{0, 0, 0, 0}。
- ioscontentOffset PointPropType 用來手動(dòng)設(shè)置初始的滾動(dòng)坐標(biāo)暇赤。默認(rèn)值為{x: 0, y: 0}心例。
- iosdecelerationRate number 一個(gè)浮點(diǎn)數(shù),用于決定當(dāng)用戶抬起手指之后鞋囊,滾動(dòng)視圖減速停下的速度止后。常見的選項(xiàng)有:
· Normal: 0.998 (默認(rèn)值)
· Fast: 0.9
- iosdirectionalLockEnabled bool 當(dāng)值為真時(shí),滾動(dòng)視圖在拖拽的時(shí)候會(huì)鎖定只有垂直或水平方向可以滾動(dòng)溜腐。默認(rèn)值為false译株。
- iosmaximumZoomScale number 允許的最大縮放比例。默認(rèn)值為1.0挺益。
- iosminimumZoomScale number 允許的最小縮放比例歉糜。默認(rèn)值為1.0。
- iosonRefreshStart function 已過期 ,請(qǐng)使用refreshControl 屬性代替望众。
- iosonScrollAnimationEnd function 當(dāng)滾動(dòng)動(dòng)畫結(jié)束之后調(diào)用此回調(diào)匪补。
- iospagingEnabled bool 當(dāng)值為true時(shí),滾動(dòng)條會(huì)停在滾動(dòng)視圖的尺寸的整數(shù)倍位置烂翰。這個(gè)可以用在水平分頁上夯缺。默認(rèn)值為false。
- iosscrollEnabled bool 當(dāng)值為false的時(shí)候甘耿,內(nèi)容不能滾動(dòng)踊兜,默認(rèn)值為true。
- iosscrollEventThrottle 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)用一次骏掀。
- iosscrollIndicatorInsets {top: number, left: number, bottom: number, right: number} 決定滾動(dòng)條距離視圖邊緣的坐標(biāo)。這個(gè)值應(yīng)該和contentInset一樣。默認(rèn)值為{0, 0, 0, 0}截驮。
- iosscrollsToTop bool 當(dāng)此值為true時(shí)笑陈,點(diǎn)擊狀態(tài)欄的時(shí)候視圖會(huì)滾動(dòng)到頂部。默認(rèn)值為true葵袭。
- iossnapToAlignment 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è)(水平)或底部(垂直)
- iossnapToInterval number 當(dāng)設(shè)置了此屬性時(shí)坡锡,會(huì)讓滾動(dòng)視圖滾動(dòng)停止后蓬网,停止在snapToInterval的倍數(shù)的位置。這可以在一些子視圖比滾動(dòng)視圖本身小的時(shí)候用于實(shí)現(xiàn)分頁顯示鹉勒。與snapToAlignment組合使用帆锋。
- iosstickyHeaderIndices [number] 一個(gè)子視圖下標(biāo)的數(shù)組,用于決定哪些成員會(huì)在滾動(dòng)之后固定在屏幕頂端禽额。舉個(gè)例子锯厢,傳遞stickyHeaderIndices={[0]}會(huì)讓第一個(gè)成員固定在滾動(dòng)視圖頂端。這個(gè)屬性不能和horizontal={true}一起使用脯倒。
- ioszoomScale number 滾動(dòng)視圖內(nèi)容初始的縮放比例实辑。默認(rèn)值為1.0。
- OnMomentumScrollEnd function當(dāng)一幀滾動(dòng)完畢的時(shí)候調(diào)用藻丢,e.nativeEvent.contentOffset剪撬。
- onScrollBeginDrag fuction當(dāng)開始手動(dòng)拖拽的時(shí)候調(diào)用。
- onScrollEndDrag fuction 當(dāng)結(jié)束手動(dòng)拖拽的時(shí)候調(diào)用悠反。
*注意:ScrollView是繼承自View婿奔,所以View中所有的屬性同樣適用于ScrollView。
ListView組件
類似iOS的UITableView控件问慎;ScrollView 相關(guān)屬性樣式全部繼承
屬性方法
**
- dataSource ListViewDataSource 設(shè)置ListView的數(shù)據(jù)源
- initialListSize number 設(shè)置ListView組件剛剛加載的時(shí)候渲染的列表行數(shù),用這個(gè)屬性確定首屏或者首頁加載的數(shù)量挤茄,而不是花大量的時(shí)間渲染加載很多頁面數(shù)據(jù)如叼,提高性能。
- onChangeVisibleRows function (visibleRows,changedRows)=>void穷劈。當(dāng)可見的行發(fā)生變化的時(shí)候回調(diào)該方法笼恰。
- onEndReachedThreshold number 當(dāng)偏移量達(dá)到設(shè)置的臨界值調(diào)用onEndReached
- onEndReached function 當(dāng)所有的數(shù)據(jù)項(xiàng)行被渲染之后,并且列表往下進(jìn)行滾動(dòng)歇终。一直滾動(dòng)到距離底部onEndReachedThredshold設(shè)置的值進(jìn)行回調(diào)該方法社证。原生的滾動(dòng)事件進(jìn)行傳遞(通過參數(shù)的形式)。
- pageSize number 每一次事件的循環(huán)渲染的行數(shù)
- removeClippedSubviews bool 該屬性用于提供大數(shù)據(jù)列表的滾動(dòng)性能评凝。該使用的時(shí)候需要給每一行(row)的布局添加over:'hidden'樣式追葡。該屬性默認(rèn)是開啟狀態(tài)。
- renderFooter function 方法 ()=>renderable 在每次渲染過程中頭和尾總會(huì)重新進(jìn)行渲染。如果發(fā)現(xiàn)該重新繪制的性能開銷比較大的時(shí)候宜肉,可以使用StaticContainer容器或者其他合適的組件。
- renderHeader function 方法 在每一次渲染過程中Footer(尾)該會(huì)一直在列表的底部,header(頭)該會(huì)一直在列表的頭部裆甩,用法同上光涂。
- renderRow function (rowData,sectionID,rowID,highlightRow)=>renderable 該方法有四個(gè)參數(shù),其中分別為數(shù)據(jù)源中一條數(shù)據(jù)遣铝,分組的ID佑刷,行的ID,以及標(biāo)記是否是高亮選中的狀態(tài)信息酿炸。
- renderScrollComponent function 方法 (props)=>renderable 該方法可以返回一個(gè)可以滾動(dòng)的組件瘫絮。默認(rèn)該會(huì)返回一個(gè)ScrollView
- renderSectionHeader function (sectionData,sectionID)=>renderable 如果設(shè)置了該方法,這樣會(huì)為每一個(gè)section渲染一個(gè)粘性的header視圖梁沧。該視圖粘性的效果是當(dāng)剛剛被渲染開始的時(shí)候檀何,該會(huì)處于對(duì)應(yīng)的內(nèi)容的頂部,然后開始滑動(dòng)的時(shí)候廷支,該會(huì)跑到屏幕的頂端频鉴。直到滑動(dòng)到下一個(gè)section的header(頭)視圖,然后被替代為止恋拍。
- renderSeparator function (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果設(shè)置該方法垛孔,會(huì)在被每一行的下面渲染一個(gè)組件作為分隔。除了每一個(gè)section分組的頭部視圖前面的最后一行施敢。
- scrollRenderAheadDistance number 進(jìn)行設(shè)置當(dāng)該行進(jìn)入屏幕多少像素以內(nèi)之后就開始渲染該行
**