滾動(dòng)視圖
ScrollView
是一個(gè)通用的可滾動(dòng)的容器际歼,可以垂直抵赢、水平滾動(dòng)(horizontal屬性)
- horizontal 屬性敷钾,配置 垂直or 水平滾動(dòng)舔糖;
- pagingEnabled 屬性尔破,配置是否允許使用滑動(dòng)手勢(shì)對(duì)視圖進(jìn)行分頁(yè)街图;
tips: 在IOS上,若ScrollView中只有一個(gè)元素懒构,用戶(hù)可以對(duì)元素進(jìn)行縮放餐济,可縮放的大小范圍由minimumZoomScale和maximumZoomScale兩個(gè)屬性進(jìn)行配置
ScrollView中的所有組件都會(huì)被渲染(包括不在屏幕內(nèi)),適合用來(lái)顯示數(shù)量不多的滾動(dòng)元素胆剧,若需要顯示較長(zhǎng)的滾動(dòng)列表絮姆,應(yīng)使用功能差不多但性能更好的FlatList組件。
長(zhǎng)列表
React Native提供了幾個(gè)適用于展示長(zhǎng)列表數(shù)據(jù)的組件秩霍,一般我們會(huì)使用FlatList或SectionList
-
- data
列表的數(shù)據(jù)源[{k1:v1, k2:vv1},{k1:v2, k2:vv2}] - renderItem
從數(shù)據(jù)源中逐個(gè)解析數(shù)據(jù)篙悯,然后返回一個(gè)設(shè)定好格式的組件來(lái)渲染。
FlatList組件用于顯示一個(gè)垂直的滾動(dòng)列表铃绒,其中的元素鸽照,結(jié)構(gòu)近似僅數(shù)據(jù)不同;
不立即渲染所有元素颠悬,優(yōu)先渲染屏幕上可見(jiàn)的元素
- data
-
- sections
- renderItem
SectionList用于渲染一組需要分組的數(shù)據(jù)