ScrollView組件
a)ScrollView必須有一個確定的高度才能正常工作
b)ScrollView內部的其他響應者尚無法阻止****ScrollView****本身成為響應者
屬性方法
- contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
這些樣式會應用到一個內層的內容容器上,所有的子視圖都會包裹在內容容器內。
- horizontal bool 當此屬性為true的時候,所有的的子視圖會在水平方向上排成一行,而不是默認的在垂直方向上排成一列。默認值為false。
- keyboardDismissMode enum('none', "interactive", 'on-drag') 用戶拖拽滾動視圖的時候,是否要隱藏軟鍵盤。安卓設備上不支持這個選項,會表現的和none一樣。
· none(默認值),拖拽時不隱藏軟鍵盤。
· on-drag 當拖拽開始的時候隱藏軟鍵盤。
· interactive 軟鍵盤伴隨拖拽操作同步地消失,并且如果往上滑動會恢復鍵盤。
- keyboardShouldPersistTaps bool 當此屬性為false的時候,在軟鍵盤激活之后,點擊焦點文本輸入框以外的地方,鍵盤就會隱藏。如果為true,滾動視圖不會響應點擊操作,并且鍵盤不會自動消失。默認值為false。
- onScroll function 在滾動的過程中,每幀最多調用一次此回調函數。調用的頻率可以用scrollEventThrottle屬性來控制。
- refreshControl element 指定RefreshControl組件,用于為ScrollView提供下拉刷新功能。
- removeClippedSubviews bool (實驗特性):當此屬性為true時,屏幕之外的子視圖(子視圖的overflow樣式需要設為hidden)會被移除。這個可以提升大列表的滾動性能。默認值為true。
- showsHorizontalScrollIndicator bool 當此屬性為true的時候,顯示一個水平方向的滾動條。
- showsVerticalScrollIndicator bool 當此屬性為true的時候,顯示一個垂直方向的滾動條。
- alwaysBounceHorizontal bool 當此屬性為true時,水平方向即使內容比滾動視圖本身還要小,也可以彈性地拉動一截。當horizontal={true}時默認值為true,否則為false。
- iosalwaysBounceVertical bool 當此屬性為true時,垂直方向即使內容比滾動視圖本身還要小,也可以彈性地拉動一截。當horizontal={true}時默認值為false,否則為true。
- iosautomaticallyAdjustContentInsets bool 如果滾動視圖放在一個導航條或者工具條后面的時候,iOS系統是否要自動調整內容的范圍。默認值為true。(譯注:如果你的ScrollView或ListView的頭部出現莫名其妙的空白,嘗試將此屬性置為false)
- iosbounces bool 當值為true時,如果內容范圍比滾動視圖本身大,在到達內容末尾的時候,可以彈性地拉動一截。如果為false,尾部的所有彈性都會被禁用,即使alwaysBounce*屬性為true。默認值為true。
- iosbouncesZoom bool 當值為true時,使用手勢縮放內容可以超過min/max的限制,然后在手指抬起之后彈回min/max的縮放比例。否則的話,縮放不能超過限制。
- ioscanCancelContentTouches bool 當值為false時,一旦有子節點響應觸摸操作,即使手指開始移動也不會拖動滾動視圖。默認值為true(在以上情況下可以拖動滾動視圖。)
- ioscenterContent bool 當值為true時,如果滾動視圖的內容比視圖本身小,則會自動把內容居中放置。當內容比滾動視圖大的時候,此屬性沒有作用。默認值為false。
ioscontentInset {top: number, left: number, bottom: number, right: number}
內容范圍相對滾動視圖邊緣的坐標。默認為{0, 0, 0, 0}。
- ioscontentOffset PointPropType 用來手動設置初始的滾動坐標。默認值為{x: 0, y: 0}。
- iosdecelerationRate number 一個浮點數,用于決定當用戶抬起手指之后,滾動視圖減速停下的速度。常見的選項有:
· Normal: 0.998 (默認值)
· Fast: 0.9
- iosdirectionalLockEnabled bool 當值為真時,滾動視圖在拖拽的時候會鎖定只有垂直或水平方向可以滾動。默認值為false。
- iosmaximumZoomScale number 允許的最大縮放比例。默認值為1.0。
- iosminimumZoomScale number 允許的最小縮放比例。默認值為1.0。
- iosonRefreshStart function 已過期 ,請使用refreshControl 屬性代替。
- iosonScrollAnimationEnd function 當滾動動畫結束之后調用此回調。
- iospagingEnabled bool 當值為true時,滾動條會停在滾動視圖的尺寸的整數倍位置。這個可以用在水平分頁上。默認值為false。
- iosscrollEnabled bool 當值為false的時候,內容不能滾動,默認值為true。
- iosscrollEventThrottle number 這個屬性控制在滾動過程中,scroll事件被調用的頻率(單位是每秒事件數量)。更大的數值能夠更及時的跟蹤滾動位置,不過可能會帶來性能問題,因為更多的信息會通過bridge傳遞。默認值為0,意味著每次視圖被滾動,scroll事件只會被調用一次。
- iosscrollIndicatorInsets {top: number, left: number, bottom: number, right: number} 決定滾動條距離視圖邊緣的坐標。這個值應該和contentInset一樣。默認值為{0, 0, 0, 0}。
- iosscrollsToTop bool 當此值為true時,點擊狀態欄的時候視圖會滾動到頂部。默認值為true。
- iossnapToAlignment enum('start', "center", 'end') 當設置了snapToInterval,snapToAlignment會定義停駐點與滾動視圖之間的關系。
· start (默認) 會將停駐點對齊在左側(水平)或頂部(垂直)
· center 會將停駐點對齊到中間
· end 會將停駐點對齊到右側(水平)或底部(垂直)
- iossnapToInterval number 當設置了此屬性時,會讓滾動視圖滾動停止后,停止在snapToInterval的倍數的位置。這可以在一些子視圖比滾動視圖本身小的時候用于實現分頁顯示。與snapToAlignment組合使用。
- iosstickyHeaderIndices [number] 一個子視圖下標的數組,用于決定哪些成員會在滾動之后固定在屏幕頂端。舉個例子,傳遞stickyHeaderIndices={[0]}會讓第一個成員固定在滾動視圖頂端。這個屬性不能和horizontal={true}一起使用。
- ioszoomScale number 滾動視圖內容初始的縮放比例。默認值為1.0。
- OnMomentumScrollEnd function當一幀滾動完畢的時候調用,e.nativeEvent.contentOffset。
- onScrollBeginDrag fuction當開始手動拖拽的時候調用。
- onScrollEndDrag fuction 當結束手動拖拽的時候調用。
*注意:ScrollView是繼承自View,所以View中所有的屬性同樣適用于ScrollView。
ListView組件
類似iOS的UITableView控件;ScrollView 相關屬性樣式全部繼承
屬性方法
**
- dataSource ListViewDataSource 設置ListView的數據源
- initialListSize number 設置ListView組件剛剛加載的時候渲染的列表行數,用這個屬性確定首屏或者首頁加載的數量,而不是花大量的時間渲染加載很多頁面數據,提高性能。
- onChangeVisibleRows function (visibleRows,changedRows)=>void。當可見的行發生變化的時候回調該方法。
- onEndReachedThreshold number 當偏移量達到設置的臨界值調用onEndReached
- onEndReached function 當所有的數據項行被渲染之后,并且列表往下進行滾動。一直滾動到距離底部onEndReachedThredshold設置的值進行回調該方法。原生的滾動事件進行傳遞(通過參數的形式)。
- pageSize number 每一次事件的循環渲染的行數
- removeClippedSubviews bool 該屬性用于提供大數據列表的滾動性能。該使用的時候需要給每一行(row)的布局添加over:'hidden'樣式。該屬性默認是開啟狀態。
- renderFooter function 方法 ()=>renderable 在每次渲染過程中頭和尾總會重新進行渲染。如果發現該重新繪制的性能開銷比較大的時候,可以使用StaticContainer容器或者其他合適的組件。
- renderHeader function 方法 在每一次渲染過程中Footer(尾)該會一直在列表的底部,header(頭)該會一直在列表的頭部,用法同上。
- renderRow function (rowData,sectionID,rowID,highlightRow)=>renderable 該方法有四個參數,其中分別為數據源中一條數據,分組的ID,行的ID,以及標記是否是高亮選中的狀態信息。
- renderScrollComponent function 方法 (props)=>renderable 該方法可以返回一個可以滾動的組件。默認該會返回一個ScrollView
- renderSectionHeader function (sectionData,sectionID)=>renderable 如果設置了該方法,這樣會為每一個section渲染一個粘性的header視圖。該視圖粘性的效果是當剛剛被渲染開始的時候,該會處于對應的內容的頂部,然后開始滑動的時候,該會跑到屏幕的頂端。直到滑動到下一個section的header(頭)視圖,然后被替代為止。
- renderSeparator function (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果設置該方法,會在被每一行的下面渲染一個組件作為分隔。除了每一個section分組的頭部視圖前面的最后一行。
- scrollRenderAheadDistance number 進行設置當該行進入屏幕多少像素以內之后就開始渲染該行
**