Button
Button组件用到4个属性，当然还有其它一些次要的属性，在此不提：
-
title: {string.isRequired} 按钮显示的文字 -
onPress: {string.isRequired} 按钮事件 -
color: 注意IOS中表示背景色(BackgroundColor), ANDROID中表示按钮文字的颜色(text color),因为这个差异，一般使用TouchableOpacity | TouchableNativeFeedback来封装Button组件 -
disabled: 禁用和按钮的交互行为，这个对样式的影响也是不一样的，IOS中底色将变为灰色，ANDROID中文字颜色变为灰色,背景色也会变灰
查看源码会发现android中使用到了 elevation 样式属性，根据 material design - Elevation & shadows介绍，可以得知这个属性是android中增加 z-index，从而增加样式空间层次感用的
FlatList
功能：
跨平台可选的horizontal mode行组件显示或者隐藏时可配置回调事件支持Header支持Footer支持Separator拉动刷新滚动加载支持 ScrollToIndex
如果希望支持section, 可以使用 <SectionList>.
注意点：
- 使用
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()
短暂的显示滚动指示器
网友评论