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, 可以使用 <SectionList>.
注意点:

  • 使用 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()

短暂的显示滚动指示器

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • 两只幼龟入住第三天。 我不知道它们是不是已适应这里了?说适应这里,它们潜水离家出走,倒挺活泼,能爬能翻。说不适应这...
    秕蒙阅读 240评论 0 0
  • 她和他情投意合,于是她就嫁给了他。 她爱他,于是她想为他生一个长得像他一样的孩子。 每一个为爱而生孩子的女人,是不...
    陈若黎阅读 162评论 0 3