SectionList怎么实现下拉刷新上拉加载

来源：4-1 ListView列表、下拉刷新、上拉加载的基本使用

qq_Y_353

2018-02-27

<SectionList
renderSectionHeader={this._renderSectionHeader}
renderItem={this._renderItem}
sections={this.state.allMath}
refreshing={false}
initialNumToRender={1}
onRefresh={()=>{alert("刷新")}}
ItemSeparatorComponent={this._separatorCom}
SectionSeparatorComponent={() => <View
style={{height: 10, backgroundColor: 'blue'}}></View>}
keyExtractor={(item,index)=>("index"+index+item)}
onEndReached={(info)=>{alert("到达底部")}}
onEndReachedThreshold={0}
stickySectionHeadersEnabled={true}
/>

//刷新和加载的代码应写在哪里

写回答

1回答

CrazyCodeBoy

2018-02-28

已采纳

可以使用RefreshControl实现下拉刷新功能：
使用onEndReached与onEndReachedThreshold属性来实现上拉加载的功能：

  <SectionList
    data={this.state.projectModels}
    renderItem={(data)=>this.renderRow(data)}
    // refreshing={this.state.isLoading}
    // onRefresh={()=>this.loadData()}
    keyExtractor={item=>item.item.id}
    ListFooterComponent={()=>this._renderFooter()}
    onEndReached={()=>this._onEndReached()}
    onEndReachedThreshold={1}
    refreshControl={
        <RefreshControl
            title='Loading...'
            titleColor={this.props.theme.themeColor}
            colors={[this.props.theme.themeColor]}
            refreshing={this.state.isLoading}
            onRefresh={()=>this.loadData()}
            tintColor={this.props.theme.themeColor}
        />
    }
/>

然后在loadData()中实现下拉刷新的逻辑，在_onEndReached()中实现上拉加载的逻辑即可；

梨花雨凉

最终也没告诉大家上拉加载的方法，只抛出了个onEndReached和onEndReachedThreshold={1} 这里给1 不就一加载页面就执行那个函数了嘛

2018-09-21

共2条回复

React Native技术精讲与高质量上线App开发

一个真实的上线项目，一次完整的开发过程，全面掌握React Native技术

1577 学习 · 727 问题

查看课程

相似问题

老师下拉刷新的时候怎么屏蔽下方cell的点击

回答 2