Button
Button组件用到4个属性,当然还有其它一些次要的属性,在此不提:
-
title
: {string.isRequired} 按钮显示的文字 -
onPress
: {string.isRequired} 按钮事件 -
color
: 注意IOS中表示背景色(BackgroundColor
), ANDROID中表示按钮文字的颜色(text color),因为这个差异,一般使用TouchableOpacity | TouchableNativeFeedback
来封装Button组件 -
disabled
: 禁用和按钮的交互行为,这个对样式的影响也是不一样的,IOS中底色将变为灰色,ANDROID中文字颜色变为灰色,背景色也会变灰
源码 Components/Button.js
查看源码会发现android中使用到了 elevation
样式属性,根据 material design - Elevation & shadows介绍,可以得知这个属性是android中增加 z-index
,从而增加样式空间层次感用的
FlatList
功能:
跨平台
可选的horizontal mode
行组件显示或者隐藏时可配置回调事件
支持Header
支持Footer
支持Separator
拉动刷新
滚动加载
支持 ScrollToIndex
如果希望支持section, 可以使用
.
注意点:
- 使用
PureComponent
可以优化性能和避免bugs. - FlatList 是
VirtualizedList
和ScrollView
的一层封装,同时继承了这2个组件的props
.
renderItem
{func.isRequired}
renderItem({
item: Object,
index: number,
separators: {
highlight: Function,
unhighlight: Function,
updateProps: Function(select: string, newProps: Object)
}
}) => ?React.Element
从 data
中选取一个 item
用于渲染list. separators
可以提供3个函数, 如果 highlight | unhighlight
不能满足需求,则可以使用 separators.updateProps
用来设置顶部和底部的分隔符的样式。
data
{array.isRequired}
. data是一个普通的数组。如果想使用别的,比如immutable list,可以直接使用底层的 VirtualizedList
ItemSeparatorComponent
{component.optional}
在每个item之间渲染,但是不会再顶部和底部渲染。默认会提供 highlighted
和 leadingItem
属性。上面的 renderItem
提供 separators.highlight/unhighlight
将会更新 highlighted
属性,也可以使用separators.updateProps
添加自定义属性
ListEmptyComponent
{(component | function | element).optional}
当list为空时渲染。可以是一个React组件或者一个render function,又或者一个渲染的元素
ListHeaderComponent
{(component | function | element).optional}
在所有items的顶部渲染
ListFooterComponent
{(component | function | element).optional}
在所有items的低部渲染
extraData
一个告诉list重新渲染的标记属性(因为通过PureComponent实现)。如果renderItem | Header | Footer | functions
有依赖除 data
以外的属性,请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值 (即此属性中的值也要immutable), 否则界面很可能不会刷新。
getItemLayout
{func.optional}
(data, index) => {length: number, offset: number, index: number}
这个方法是一个可选的优化,用于避免动态测量内容尺寸的开销,不过前提是你可以提前知道内容的高度。如果你的行高是固定的, getItemLayout
用起来既高效又简单,类似:
getItemLayout={(data, index) => ({length: Item行高, offset: Item行高 * index, index})}
对几百个item,添加这个属性会极大的提升性能。如果使用了 ItemSeparatorComponent
组件,记得在offset计算中包含分割线的长度(高或者宽)。
horizontal
{boolean.optional}
选择渲染的方向,如果为true表示水平的渲染item
initialNumToRender
初次渲染的item条数。这个数量应该足够填充screen,但是又不能太多。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。
initialScrollIndex
指定显示第一条item的索引,默认情况是使用第一条item放置在最上面。设置这个属性将关闭 '滚动到顶端' 这个动作的优化。位于 initialScrollIndex
位置的元素总是会被立刻渲染。使用这个属性前需要先设置 getItemLayout
属性
inverted
翻转滚动方向。实质是将scale变换设置为-1。
keyExtractor
(item: object, index: number) => string
用于对给定的item在指定的索引提取唯一Key。Key用于缓存并且作为React追踪item重新排序。
numColumns
多列布局只能在非水平模式(即horizontal={false}
)。此时组件内元素会从左到右从上到下按Z字形排列,类似启用了 flexWrap
的布局。组件内元素必须是等高的,暂时还无法支持瀑布流布局。
onEndReached
(info: {distanceFromEnd: number}) => void
当列表被滚动到距离内容最底部不足 onEndReachedThreshold
的距离时调用。
onEndReachedThreshold
决定当距离内容最底部还有多远时从用触发 onEndReached
回调。注意此参数是一个比值而非像素单位。比如, 0.5
表示距离内容最底部的距离为当前列表可见长度一般时触发。
onRefresh
() => void
如果写了这个属性,一个标准的 RefreshControl
将添加到 pull to Refresh
功能中。确保同时正确的设置了 refreshing
属性。
refreshing
{boolean.optional}
当刷新等待新数据到来时将其设置为true
onViewableItemsChanged
(info: {
viewableItems: array,
changed: array
}) => void
在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置 viewabilityConfig
属性。
还有几个属性在此省略,可参考官网,下面是方法:
scrollToEnd([params])
滚动到内容的底部,如果不设置 getItemLayout
属性的话,可能会比较卡。
scrollToIndex(params: object)
将位于指定位置的元素滚动到可视区的指定位置,当 viewPosition 为 0 时将它滚动到屏幕顶部,为 1 时将它滚动到屏幕底部,为 0.5 时将它滚动到屏幕中央。
如果不设置 getItemLayout
属性的话,无法跳转到当前可视区域以外的位置。
scrollToItem(params: object)
这个方法会顺序遍历元素。尽可能使用 scrollToIndex.如果不设置 getItemLayout
属性的话,可能会比较卡。
scrollToOffset(params:object)
滚动列表到指定的偏移(以像素为单位),等同于 ScrollView
的 scrollTo
方法。
recodeInteraction()
主动通知列表发生了一个事件,以使列表重新计算可视区域。比如说当 waitForInteractions={true}
并且用户没有滚动列表时,就可以调用这个方法。不过一般来说,当用户点击了一个列表项,或发生了一个导航动作时,我们就可以调用这个方法。
flashScrollIndicators()
短暂的显示滚动指示器