React Native組件 --ScrollView&& ListView

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)之后就開始渲染該行
**
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末周荐,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子僵娃,更是在濱河造成了極大的恐慌概作,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件默怨,死亡現(xiàn)場(chǎng)離奇詭異讯榕,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)匙睹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門愚屁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人痕檬,你說我怎么就攤上這事霎槐。” “怎么了梦谜?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵丘跌,是天一觀的道長(zhǎng)袭景。 經(jīng)常有香客問我,道長(zhǎng)碍岔,這世上最難降的妖魔是什么浴讯? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮蔼啦,結(jié)果婚禮上榆纽,老公的妹妹穿的比我還像新娘。我一直安慰自己捏肢,他們只是感情好奈籽,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鸵赫,像睡著了一般衣屏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辩棒,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天狼忱,我揣著相機(jī)與錄音,去河邊找鬼一睁。 笑死钻弄,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的者吁。 我是一名探鬼主播窘俺,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼复凳!你這毒婦竟也來了瘤泪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤育八,失蹤者是張志新(化名)和其女友劉穎对途,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體髓棋,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡掀宋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了仲锄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡湃鹊,死狀恐怖儒喊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情币呵,我是刑警寧澤怀愧,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布侨颈,位于F島的核電站,受9級(jí)特大地震影響芯义,放射性物質(zhì)發(fā)生泄漏哈垢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一扛拨、第九天 我趴在偏房一處隱蔽的房頂上張望耘分。 院中可真熱鬧,春花似錦绑警、人聲如沸求泰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽渴频。三九已至,卻和暖如春北启,著一層夾襖步出監(jiān)牢的瞬間卜朗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來泰國打工咕村, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留场钉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓培廓,卻偏偏與公主長(zhǎng)得像惹悄,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子肩钠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容