Button && FlatList 基础组件

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 是 VirtualizedListScrollView 的一层封装,同时继承了这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之间渲染,但是不会再顶部和底部渲染。默认会提供 highlightedleadingItem 属性。上面的 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)

滚动列表到指定的偏移(以像素为单位),等同于 ScrollViewscrollTo 方法。

recodeInteraction()

主动通知列表发生了一个事件,以使列表重新计算可视区域。比如说当 waitForInteractions={true} 并且用户没有滚动列表时,就可以调用这个方法。不过一般来说,当用户点击了一个列表项,或发生了一个导航动作时,我们就可以调用这个方法。

flashScrollIndicators()

短暂的显示滚动指示器

你可能感兴趣的:(Button && FlatList 基础组件)