先吐槽，看官方示例代码看的一头雾水
使用方式：
1.按官方文档来
<InfiniteScroll
ref={ref}
style={{ backgroundColor: '#ffffff' }}
hasMore={hasMore}
loadMore={loadMore}
data={list}
keyExtractor={(word) => word}
renderItem={({ item: word, index: i }) => (
<ListItem
hasBorder
key={word}
title={word}
extraText={String(i)}
onClick={() => {
console.log(`click ${word}`)
warn(word)
}}
/>
)}
>
{/* 如果不想使用renderItem的方式，直接传入children即可 */}
</InfiniteScroll>
2.如上所示，把children 扔到标签里
<InfiniteScroll
ref={ref}
hasMore={hasMore}
loadMore={loadMore}
>
{{ 你的children, 比如用map或foreach渲染列表 }}
</InfiniteScroll>
其实重要的属性就两个，hasMore和loadMore, 前者判断是否有更多数据并展示加载标识，后者是下拉触发的动作即service
最重要的两点：
1.尾页数据的判断，最后一页是满页或者不足一页的判断
2.如果你发现自己写的逻辑哪里都没问题，但是无限滚动就是不生效，或者一直显示加载中，不妨看下自己的infiniteScroll组件是否在一个固定高度的容器里，可以是100vh, 或者固定高度（或者是页面总高100%，其他部分固定高度，无限滚动部分设置height: 0, flex: 1）