6.2React Native基础ScrollView和FlatList；

最新推荐文章于 2022-08-23 15:01:04 发布

mayundoyouknow

最新推荐文章于 2022-08-23 15:01:04 发布

阅读量4.3k

点赞数

本文链接：https://blog.csdn.net/ahou2468/article/details/87062668

版权

本文详细介绍了React Native中的ScrollView和FlatList组件。ScrollView适用于简单的滚动场景，但性能不佳，而FlatList则针对长列表进行了优化，实现惰性渲染。文中还列举了两者的常用属性和方法，以及如何在FlatList中添加头部、尾部组件、下拉刷新、自动加载和分割线等示例。

摘要由CSDN通过智能技术生成

2.4.2.FlatList添加头部和尾部组件

2.4.3.FlatList下拉刷新

2.4.4.FlatList自动加载下一页

2.4.5.FlatList分割线

ScrollView和FlatList应该如何选择？

ScrollView和FlatList应该如何选择？ScrollView会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂，使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示，可能有好几屏的高度。创建和渲染那些屏幕以外的JS组件和原生视图，显然对于渲染性能和内存占用都是一种极大的拖累和浪费。

这就是为什么我们还有专门的FlatList组件。FlatList会惰性渲染子元素，只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多，因而API在使用上也更为繁琐。除非你要渲染的数据特别少，否则你都应该尽量使用FlatList，哪怕它们用起来更麻烦。

此外FlatList还可以方便地渲染行间分隔线，支持多列布局，无限滚动加载等等。

1.ScrollView

1.1ScrollView介绍

a.一个封装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

b.ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。

c.要给ScrollView一个确定的高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex:1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。

1.2ScrollView常用属性

horizontal bool
当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。

keyboardDismissMode enum('none', 'on-drag', 'interactive')
用户拖拽滚动视图的时候，是否要隐藏软键盘。
跨平台可用的值
'none' （默认值），拖拽时不隐藏软键盘。
'on-drag'，当拖拽开始的时候隐藏软键盘。
仅iOS可用的值
'interactive'，软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和none一样。

pagingEnabled bool
当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。
注意：垂直分页在Android上不支持。

refreshControl element
指定RefreshControl组件，用于为ScrollView提供下拉刷新功能。只能用于垂直视图，即horizontal不能为true。

scrollEnabled bool
当值为false的时候，内容不能滚动，默认值为true。
注意即便禁止用户滚动，你也仍然可以调用scrollTo来滚动。

showsHorizontalScrollIndicator bool
当此属性为true的时候，显示一个水平方向的滚动条。

showsVerticalScrollIndicator
当此属性为true的时候，显示一个垂直方向的滚动条。

stickyHeaderIndices array of number
一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递stickyHeaderIndices={[0]}会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}一起使用。

endFillColor color
有时候滚动视图会占据比实际内容更多的空间。这种情况下可以使用此属性，指定以某种颜色来填充多余的空间，以避免设置背景和创建不必要的绘制开销。一般情况下并不需要这种高级优化技巧。

(android)overScrollMode enum('auto', 'always', 'never')
覆盖默认的overScroll模式
可选的值有：
'auto' - 默认值，允许用户在内容超出视图高度之后可以滚动视图。
'always' - 无论内容尺寸，用户始终可以滚动视图。
'never' - 始终不允许用户滚动视图。

alwaysBounceHorizontal
当此属性为true时，水平方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。当horizontal={true}时默认值为true，否则为false。

(iOS)automaticallyAdjustContentInsets bool
当滚动视图放在一个导航条或者工具条后面的时候，iOS系统是否要自动调整内容的范围。默认值为true。（译注：如果你的ScrollView或FlatList的头部出现莫名其妙的空白，尝试将此属性置为false）

(iOS)bounces bool
当值为true时，如果内容范围比滚动视图本身大，在到达内容末尾的时候，可以弹性地拉动一截。如果为false，尾部的所有弹性都会被禁用，即使alwaysBounce属性为true。默认值为true。

(iOS) bouncesZoom bool
当值为true时，使用手势缩放内容可以超过min/max的限制，然后在手指抬起之后弹回min/max的缩放比例。否则的话，缩放不能超过限制。

canCancelContentTouches bool
当值为false时，一旦有子节点响应触摸操作，即使手指开始移动也不会拖动滚动视图。默认值为true（在以上情况下可以拖动滚动视图）。

(iOS)contentInset object: {top: number, left: number, bottom: number, right: number}
内容范围相对滚动视图边缘的坐标。默认为{top: 0, left: 0, bottom: 0, right: 0}。

(iOS)contentOffset PointPropType
用来手动设置初始的滚动坐标。默认值为{x: 0, y: 0}。

(ios)indicatorStyle enum('default', 'black', 'white')
设置滚动条的样式。